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.
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:
HTML1 - index.html
<!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>
Next
</div>
<div data-role="content">
<input type="button" value="Button" id="changePage">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
HTML2 - second.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>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Update:
From what I can see this is a bug. I have reported it here: https://github.com/jquery/jquery-mobile/issues/7406
Related
Hi i am new for jquery mobile. I gt three page inside my apps. page1.html->page2.html->page3.html.
I need to preserve page1's textbox value when page2.html back to page1.html.
After i googling, i get the answer
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
How i back my page
history.go(-1);
go to next page
$.mobile.pageContainer.pagecontainer("change", url, {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
changeHash: true
})
But nw is my problem when page2 back to page1, then page1 go to page2 , page2 textbox value will keep preserved also. Is it possible that when i click back button then textbox value will be preserved, but when i click next button then pages will be refresh?
You are doing it all wrong, you should have read everything about cashing.
When page cashing is turned on you still have a option to decide which page will have it turned on and which one will not get cashed.
All you need to do to prevent second page cashing is to add attribute data-dom-cache="false" to your second page data-role="page" div container, and that is that.
Working example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</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>
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
</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="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="text" value="" id="sdfsd"/>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<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.2.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="page2" data-dom-cache="false">
<div data-role="header">
Back
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<input type="text" value="" id="dffsd"/>
</div>
</div>
</body>
</html>
can you please tell me How to show and hide header when user click anywhere in page?
I think i need to use toggle class and ('.header').show('slow'); or hide .i don't know how to use that?
http://jsfiddle.net/ravi1989/YcxtS/
<div data-role="header">
<h1>Add Images</h1>
</div>
This is basis header .But I need to implement header having multiple images scrolling horizontally .
how to scroll images horizontally in jquery mobile?
Just add these attributes to your header: data-position="fixed" and data-fullscreen="true".
Working example: http://jsfiddle.net/uTpH4/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</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.3.1/jquery.mobile-1.3.1.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Index page</h1>
Next
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
I know there are similar kind of questions asked and answered as well. But my problem is different. Here is code sample that I am using to load and stylize my content.
$("body").on("click","[data-view]",function(){
var view=$(this).attr("data-view");
$("#mainView").load("pageRouter.php?view="+view).trigger("create");
});
I searched forums and found .trigger("create") is the way to stylize the dynamically loaded content.But it is not helping.
Solution
You are doing it incorrectly, load is asynchronous function so you need to wait for it to load the content before you can enhance the content.
You will need to do this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("create");
});
This will work if you are only loading content but if you are loading a full page, with header and footer then use this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("pagecreate");
});
Read more about lead and its callback here.
Working example:
index.php
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</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.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$("#index").load("load.php", function() {
$(this).trigger("pagecreate");
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
</div>
</body>
</html>
load.php
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a data-role="button">Button</a>
</div>
In my HTML file:
<div data-role="content" id="termsContent">
<div id="termDiv"></div>
</div>
in my js file:
$(function () {
$("#termsPage").live('pagecreate', function(event,ui){
$("#termDiv").load("tnc.html").trigger('create');
});
});
Then, in my tnc.html file:
<a href="http://www.xxx.com/usage-terms.html">
I seem can't find any solution in Google on how to load the local html page correctly. Does anyone have suggestion/experience on this? I want to show the clicked link directly.
You were close but not enough.
.trigger('create') can not be used after a load function. Load function is asynchronous so we need to wait for success state to trigger pagecreate.
Button example is not going to be shown, it needs to be closed.
Do not use pagecreate, in this case pagebeforeshow
Here's a working example:
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<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.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="termDiv">
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
load.html :
Onen link
index.js :
$(document).on('pagebeforeshow', '#index', function(){
$("#termDiv").load("load.html", function(){
$('#index').trigger('create');
});
});
I hope this was what you wanted all along.
I am a fresher in jquery mobile. I using the code get from stackoverflow. My problem is, this solution works well in samsung and other but not works in iphone and sonyericsson. Please help anyone...
I want to go back at the top of the page while scroll-down at bottom of the page by clicking link..
Here is my code:
<a id="uptotop" class="ui-btn-right" data-icon="arrow-u" data-theme="a">▲TOPにもどる </a>
<script type="text/javascript">
$('div').live('pagebeforecreate',function(event, ui){
$('#uptotop').live('click',function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
});
</script>
what about using a simple anchor? example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1><a name="top"></a>Header</h1>
</div> <!-- /header -->
<div data-role="content">
<p>lots of content here...<br>scroll down to find the button...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Back to top of page ...
</p>
</div> <!-- /content -->
</div> <!-- /page -->
</body>
</html>