jquery mobile pageContainer issues

Question

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.

score 3 · Answer 1 · edited May 23 '17 at 12:34

3

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");
});

edited May 23 '17 at 12:34

Community

1
1

answered May 08 '12 at 17:08

jdi

90,542
19
167
203

Thanks, other than the documentation, you know jquery mobile doesn't seem to make much sense as far as what it provides....probably better to stick to regular jquery. – Juan Carlos Moreno May 09 '12 at 04:32

Juan Carlos Moreno · Accepted Answer · 2012-05-09T05:32:44.123

3

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')});

edited May 09 '12 at 05:32

answered May 09 '12 at 04:35

Juan Carlos Moreno

2,754
3
22
21

Why doesnt this work with `changePage`? I need to use a jQuery collection as the first argument. – Robin Sep 04 '12 at 03:19
I believe because pagechange is the event used for changePage and pageLoad for loadPage. I am not sure why I couldnt inject the page propperly with changePage but this worked for me. – Juan Carlos Moreno Sep 06 '12 at 22:42

score 1 · Answer 3 · answered May 08 '12 at 16:18

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

jquery mobile pageContainer issues

3 Answers3

Linked