CODEWITHSUNDEEP
jqueryjquery-mobile
Juan Carlos Moreno
Juan Carlos Moreno

Reputation: 2784

jquery mobile pageContainer issues

If I am reading correctly the documentation on: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

Using pageContainer and role should replace the contents of one page into my current page, for example as if it was a template where the header and footer are kept but only the contents are changed.

I am trying to do a simple example to understand how this works but I am having a hell of a time.

Here's my super simple example. 

<!DOCTYPE html>
<html>
  <head>
  <title></title>

  <link rel="stylesheet" href="static/css/jquery.mobile-1.1.0.min.css" type="text/css" />   
  <script type="text/javascript" charset="utf-8" src="static/js/jquery-1.7.1.min.js"></script>        
  <script type="text/javascript" charset="utf-8" src="static/js/jquery.mobile-1.1.0.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){
        $.mobile.changePage('page2.html',{
            'pageContainer': $('#content_container'),
            'role':'content'
        });
    });

  </script>
  </head>
  <body >
      <div data-role="page">
          <div data-theme="a" data-role="header">
              <div data-role="navbar" data-iconpos="top">
                  My Header
              </div>
          </div>
          <div id='content_container' data-role="content">
              <p>Page 1 </p>
          </div>
          <div data-theme="a" data-role="footer">
              My Footer
          </div>
      </div>                 
  </body>
</html>

And this is page 2

<html>
    <body>
        <div data-role="page">
            <p>Page 2</p>
        </div>
    </body>
</html>

When this loads, instead of replacing "Page 1" for "Page 2" I get redirected to a new empty page. Any pointers to what I am doing wrong would be appreciated.

Upvotes: 8

Views: 11914

Answers (3)

Juan Carlos Moreno
Juan Carlos Moreno

Reputation: 2784

here's a way to accomplish this through the API, unfortunately utilizing jquery's load directly does not keep the format the elements this method however, does.

$(document).bind('pageload',function(evt,data){ 
     $(document).unbind('pageload');  
     $(data.page).fadeIn(); 
});
$.mobile.loadPage('page2.html',{'pageContainer':$('#content_container')});

Upvotes: 3

jdi
jdi

Reputation: 92559

You have a syntax error in your id here: 

<div id='#content_container' data-role="content">

Change it to (remove hash):

<div id='content_container' data-role="content">

And according to related question Open links in div container in JQuery Mobile, changePage() doesn't seem to work for loading server content into a specific container within the page. It wants to change the whole page.

This works:

$(document).ready(function(){
    $("#content_container").load("page2.html");
});

Upvotes: 3

Jasper
Jasper

Reputation: 75993

You need to add a data-role="content" element to the second page. And the pageContainer option of the changePage() method is meant to change the container for all pages, not the container for a specific page (I haven't ever used this option but I believe this is the idea).

If you do a console.log($.mobile.pageContainer) you will see that it is the body element: http://jsfiddle.net/8T35d/.

The purpose of this option is to allow you to create a persistent UI that does not change when you call the changePage() method.

If you are looking for a persistent header/footer then take a look at this page in the documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

Upvotes: 1

Related Questions