I have been stuck for a few days on this issue.
To simplify, I have 2 pages (<div data-role="page" id="page1">...</div>
and <div data-role="page" id="page2">...</div>)
and JS script that does a changePage("#page2")
;
As a result, the URL is correctly modified but the page we see is still the first one. When I press F5 it refreshes to the second page.
I really don't understand why it does this, any help would be greatly appreciated !
Here is my simplified code :
<!DOCTYPE html>
<html>
<head>
$view->jQuery()->setLocalPath('/js/jquery-1.9.1.min.js');
$view->jQuery()->addJavascriptFile('/js/jquery.mobile-1.3.1.js');
</head>
<body>
<div class="tite"> Title</div>
<form ...>
<div class="zend_form">
<div data-role="page" id="page1">
<div data-role="header" data-backbtn="false"> ... </div>
<div class="title"> Another title </div>
<div data-role="content">
...
...
<a data-role="button" class="validPartial" href="#">Submit</a>
</div>
<div data-role="footer"> ... </div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-backbtn="false"> ... </div>
<div class="title"> Second page title </div>
<div data-role="content">
...
</div>
<div data-role="footer"> ... </div>
</div>
</div>
</form>
<p>
Some text added by JQuery
</p>
<script>
$(document).ready(function() {
$('.validPartial').tap(function(e){
$.mobile.changePage("#page2");
});
});
</script>
</body>
</html>