CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobiledom
Christian
Christian

Reputation: 1586

jQuery mobile - Pagecontainer disappears from DOM

In jQuery mobile I want to load pagecontainers from external files. I can add the markup to my DOM, but the problem I am facing afterwards is that as soon as I navigate to #page2, the entire #page1-div disappears from the DOM and thus I cannot navigate back (Please see screenshots below).

DOM before clicking "Go To Page 2"

before

DOM after clicking "Go To Page 2"

after

As you can see, the entire #page1-div is gone for good. Why is that? Any thoughts? Please 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>

Remarks: This is a follow up question to this one: jQuery mobile - Splitting up pages to different files

Upvotes: 3

Views: 886

Answers (2)

Omar
Omar

Reputation: 31732

jQuery Mobile removes external pages when you navigate away of them. You should leave a base page cached in DOM rather than loading all pages.

  • Solution one: in test.html, add html markup of page1.html and load page2.html externally.

  • Solution two: add data-dom-cache="true" to page1 div to keep it cached even if it's loaded externally.

      <div data-role="page" id="page1" data-dom-cache="true">

Update

You can cache all external pages at once without the need to add data-dom-cache to each and every page div. All you need to do is to globally set domCache option of page widget to true on 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" />

Upvotes: 4

Manmanwahaha Ma
Manmanwahaha Ma

Reputation: 126

For this case, you should try to init the page manually

In page1:

$(document).bind("mobileinit", function () {
    ...
    $.mobile.autoInitializePage = false;
    $.mobile.initializePage();
});

In page2:

$(function () {
    $.mobile.activePage = null;
    $.mobile.initializePage();
});

This is my solution for switch 2 pages not in same HTML.

Upvotes: 0

Related Questions