Jquery mobile how to force target page refresh after changePage
Question
Is there any way to refresh the target page after changePage.
I really search but nothing works for me.
2 answers
solution1
3 2014-04-09 01:59:21
This may be what you (or others) are really looking for:
data-ajax="false"
<a href="/" data-ajax="false">
<img id="mainLogo" src="logo.svg" width="215" />
</a>
This will bypass ajax behavior.
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
solution2
1 ACCPTED 2012-09-29 06:44:39
Try one of the following solutions:
1 - Use $(location).attr('href',"your_html.html");
Example:
Since you're using single page template, let's suppose that you have two jQuery Mobile pages ( #page_1 and #page_2 ) in 2 separate HTML files ( page_1.html and page_2.html ).
If you want to navigate from #page_1 (which is in page_1.html ) to #page_2 (which is in page_2.html ), you'd use:
$(location).attr('href',"page_2.html");
Check the complete example below:
- page_1.html :
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(function() {
$("#mlink").click(function() {
$(location).attr('href',"page_2.html");
});
$("#mlink_2").click(function() {
$(location).attr('href',"page_1.html");
});
});
</script>
</head>
<body>
<div id="page_1" data-role="page">
<div data-role="content">
PAGE 1<br>
<!-- WHEN CLICKING ON THIS LINK, YOU'LL GO TO #page_2 in page_2.html
WITH PAGE REFRESH -->
<a id="mlink">GO TO PAGE 2</a>
</div>
</div>
</body>
</html>
- page_2.html :
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(function() {
$("#mlink").click(function() {
$(location).attr('href',"page_2.html");
});
$("#mlink_2").click(function() {
$(location).attr('href',"page_1.html");
});
});
</script>
</head>
<body>
<div id="page_2" data-role="page">
<div data-role="content">
PAGE 2<br>
<!-- WHEN CLICKING ON THIS LINK, YOU'LL GO TO #page_1 in page_1.html
WITH PAGE REFRESH -->
<a id="mlink_2">GO TO PAGE 1</a>
</div>
</div>
</body>
</html>
2 - Try using $.mobile.changePage("your_html.html", { reloadPage: true });
Considering the previous example, and supposing that you want to navigate from #page_1 to #page_2 , you'd simply have to replace the method $(location).attr('href',"page_2.html"); with:
$.mobile.changePage("page_2.html", { reloadPage: true });
For more information about the method $.mobile.changePage() and its option reloadPage , check the following link: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.