Menu
I'm using JQM 1.4.2 and have this JS:
$.mobile.changePage( "page.html", { reloadPage: true} );
and it works fine. Problem is, this will be deprecated in 1.5.0 now I try to use this:
$.mobile.pageContainer.pagecontainer("change", "page.html", { reload:true } );
and it does not work (page is not reloaded). How to force page to reload? Thank you.
718
First are you sure you are using correct jQuery Mobile 1.4 version? Beta versions of jQuery Mobile 1.4 didn't have pagecontainer widget.
This functionality works just fine.
I even made you a working example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo 1</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('pageinit', '#index', function(){
$(document).on('click', '#changePage', function(){
$.mobile.pageContainer.pagecontainer( "change", "second.html", { reload: "true" } );
});
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<input type="button" value="Button" id="changePage">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo 2</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
From what I can see this is a bug. I have reported it here: https://github.com/jquery/jquery-mobile/issues/7406
77
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
