JQuery mobile - Pagecontainer disappears from DOM
In jQuery mobile, I want to load pagecontainers from external files. I can add markup to my DOM, but the problem I am facing is that as soon as I go to # page2, the entire # page1-div disappears from the DOM and so I cannot go back (see screenshots below).
DOM before clicking "Go to page 2"
DOM after clicking "Go to page 2"
As you can see, the whole # page1-div is gone forever. Why is this? Any thoughts? See my markup and code below:
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
page1.html
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
<a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
</div>
</div>
page2.html
<div data-role="page" id="page2" class="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
<a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
</div>
</div>
Note. This is the next question to this: jQuery mobile - Splitting Pages into Different Files
source to share
jQuery Mobile removes external pages when you navigate away from them. You should leave the base page cached in the DOM and not load all pages.
-
Solution one: in test.html add html markup for page1.html and load page2.html from outside.
-
Solution two: add
data-dom-cache="true"
a div to page1 so it will be cached even if loaded externally.<div data-role="page" id="page1" data-dom-cache="true">
Update
You can cache all external pages at the same time without having to add a data-dom-cache
div to each page. All you have to do is globally set the domCache
page widget parameter to true
on the mobileinit
event. The code should be placed after jQuery.js and before jQuery-Mobile.js.
<script src="jquery.js" />
<script>
$(document).on("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="jquery-mobile.js" />
source to share
In this case, you should try to manually start the page
On page 1:
$(document).bind("mobileinit", function () {
...
$.mobile.autoInitializePage = false;
$.mobile.initializePage();
});
On page 2:
$(function () {
$.mobile.activePage = null;
$.mobile.initializePage();
});
This is my solution for switch 2 pages not in the same HTML.
source to share