Jquery mobile how to force target page refresh after changePage

Is there any way to refresh the target page after changePage.

I really search but nothing works for me.

Answer1:

Try one of the following solutions:

<strong>1 -</strong> Use $(location).attr('href',"your_html.html");

<strong>Example:</strong>

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");

<strong>Check the complete example below:</strong>

<strong>-</strong> 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>

<strong>-</strong> 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> <hr>

<strong>2 -</strong> 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

Answer2:

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.

Linking without Ajax

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.

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:Jquery mobile how to force target page refresh after changePage