I've been struggling with this for several days now. I'm trying to get a Select menu to work as a navigation menu. But when I click on the buttons nothing happens. Thanks to @Enrico, I think I have the changePage code correct. I also discovered that Ajax needed to be turned off on the links. I've gone a bit overboard with trying to get Ajax disabled. Here's my code in the head:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<base href="http://kickfitness.com/" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$( document ).on( "mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxEnabled = false;
});
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script language="text/javascript">
$(function() {
$("#select-choice-1").change(function() {
$.mobile.ajaxEnabled = false;
$.mobile.changePage($(this).val());
});
});
</script>
Here is my menu:
<div id="MobileWrapper" data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1" data-theme="a" data-form="ui-btn-up-a"data-native-menu="false" data-mini="false"><!-- data-native-menu="false" -->
<option data-placeholder="true">Navigation</option><!-- data=placeholder makes this not show up in the pop up-->
<option value="http://kickfitness.com/index.php">Home</option>
<option value="/services/index.php">Services</option>
<option value="trainers/index.php">Trainers</option>
<option value="/locations/index.php">Locations</option>
<option value="/calendar/index.php">Calendar</option>
<option value="/contactus/index.php">Contact Us</option>
</select>
</div><!--END MobileWrapper DIV-->
Here is a URL to the page. It is done with responsive CSS so you can see the mobile nav by making your browser window really small. http://kickfitness.com/services/index2.php
Any help would be appreciated.
You don't need all the $.mobile.ajaxEnabled settings, just call changePage with option "reloadPage" equal to true:
$(function() {
$("#select-choice-1").change(function() {
$.mobile.changePage($(this).val(), { reloadPage: true } );
});
});