Menu
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.
981
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");
});
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')});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With