jquery mobile pageContainer issues

jquery, jquery-mobile

Solution

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

Problem

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.

Original source