Search jQuery

jQuery Forum

How can I get the page loading widget when using a dropdown navigation list?

in jQuery Mobile • 6 months ago

I have the following code for a dropdown navigation menu to choose which page to go to next. This works great, but I don't get the page loading widgets with this method. Can I tweak this code to get that effect? Or is there a better way to do this? I have been searching around for hours and can't seem to find a solution for what I am trying to do!

Thanks for any help or suggestions!

Here is my code:

<html>
<head>
<title>Links</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<form name="nav">
<select name="surf" data-mini="true" onChange="location=document.nav.surf.options[document.nav.surf.selectedIndex].value;" value="GO">
<option selected>Choose a Report</option>
<option value="info2.php">Orders Created by Day</option>
<option value="info.php">Shipments Completed by Day</option>
<option value="info3.php">Picks Completed by Day</option>
<option value="info4.php">Orders Created by Day by Client</option>
<option value="info5.php">Shipments Completed by Day by Client</option>
<option value="info6.php">Picks Completed by Day by Client</option>
</select>
</form>
</body>
</html>

Replies(2)

watusiware

Re: How can I get the page loading widget when using a dropdown navigation list?

6 months ago

Is there some reason you aren't using $.mobile.changePage()?

lando_1

Re: How can I get the page loading widget when using a dropdown navigation list?

6 months ago

Well pretty much because I don't fully know what I am doing, I am fairly new to javascript. I implemented a function as seen below, but now I am getting errors. The navigation works the first time, but when the second page loads, there is an error thrown when I check the console in Chrome:

Uncaught TypeError: Cannot read property 'options' of undefined

changeMyPage
onchange

Any pointers for my next step? Thanks for your help!

<form name="nav">
<select name="list" data-mini="true" onChange="changeMyPage();">
<option selected>Choose a Report</option>
<option value="index.php">Home Page</option>
<option value="info2.php">Orders Created by Day</option>
<option value="info.php">Shipments by Day</option>
<option value="info3.php">Picks by Day</option>
<option value="info4.php">Orders Created by Day by Client</option>
<option value="info5.php">Shipments by Day by Client</option>
<option value="info6.php">Picks by Day by Client</option>
</select>
</form>
<script>
function changeMyPage()
{
var x = document.nav.list.options[document.nav.list.selectedIndex].value;
$.mobile.changePage(x);
}
</script>

Top Reply

Response title

Attachments

jQuery Forum

How can I get the page loading widget when using a dropdown navigation list?

Replies(2)

Re: How can I get the page loading widget when using a dropdown navigation list?

Re: How can I get the page loading widget when using a dropdown navigation list?

Statistics

Tags

Actions

Related Posts