jQM navigating to page programmatically
javascript, jquery, jquery-mobile
Solution
You can call
$(':mobile-pagecontainer').pagecontainer('change', '#pick');
for example,
http://jsfiddle.net/LDyx6/
js
function test() {
$(':mobile-pagecontainer').pagecontainer('change', '#page2');
}
html
<div id="page1" data-role="page" data-theme="a">
<div data-role="header">
<h1>page1</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button"> go to page2</a>
<a href="#" data-role="button" onclick="test()"> go to page2 (script)</a>
</div>
</div>
<div id="page2" data-role="page" data-theme="b">
<div data-role="header">
<h1>page2</h1>
<a href="#page1" data-role="button" data-direction="reverse" data-icon="back">back</a>
</div>
<div data-role="content"></div>
</div>
Problem
I'm using 1.4 so the changePage() technique is deprecated and I'd rather not use it... http://api.jquerymobile.com/jQuery.mobile.changePage/ I have this code: ``` $("select.start").change(function() { alert('test'); $("#home").pagecontainer("change", "#pick"); //$("#pick").pagecontainer("change"); }); ``` Neither of the above worked -- the 'change' event is firing but when the select option is selected no page #pick is positioned into place as I require. Can someone show me what I might be doing wrong? EDIT | ``` <select class="start"> <option>Item 1 (Last Done: 2.4 weeks ago)</option> <optgroup label="Section B"> <option value="#">Standing</option> </optgroup> </select> ``` The <optgroup> doesn't seem to make a difference