Hi all I am navigating from index.html to test.html as $.mobile.changePage("test.html", {transition : "slide"}); which works fine. But in my test.html there are multiple html pages in different div. In test.html I am calling different html page which is in different div in same html file (i.e.test.html ) as $.mobile.changePage("#secondtestPage", {transition : "slide"}); But here it is not navigate to secondtestPage. My index.html is as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Ins ide callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("test.html", {transition : "slide"});
}
</script>
</body>
</html>
Now page navigate to test.html and my test.html looks as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firsttestPage" id="firsttestPage">
</div>
<script type="text/javascript">
function callnewSecondPage()
{
alert ("Inside callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("#secondtestPage", {transition : "slide"});
//$.mobile.changePage("index.html", {transition : "slide"});
}
</script>
</div>
<div data-role="page" id="secondtestPage" onclick=callThirdPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="secondtestPage" id="secondtestPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdtestPage');
}
</script>
</div>
<div data-role="page" id="thirdtestPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthtestPage');
}
</script>
</div>
<div data-role="page" id="fourthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage">
</div>
</div>
<div data-role="page" id="fifthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage">
</div>
</div>
<div data-role="page" id="sixthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage">
</div>
</div>
</body>
</html>
But now on click of button it is not navigating to “callSecondPage”. and if I call $.mobile.changePage("index.html", {transition : "slide"}); then it navigate to index.html properly, then why in multipage changePage is not working? one more thing If I replace index.html code with test.html code then $.mobile.changePage("#secondtestPage", {transition : "slide"}); works perfectly.
I am confused why it is behaving like this? Any suggestion will be appreciated. Thanks in advance.
jQuery Mobile will asynchronously load the contents of your test.html file in order to transition to it. You have a
callSecondPage()function defined within the same scope in both index.html and test.html which is probably at fault. Try naming it something different in test.html and report back.EDIT:
OK, it turns out that jQuery Mobile does not actual load all of your other data-role=”page” pages other than the first. If you inspect the DOM while transitioning from index.html to test.html, you’ll notice the second, third and forth pages are missing.
This is from the jQuery Mobile documentation:
http://jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html