62317

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

  • cordova build android throws error on Ubuntu 12.04
  • Unique SMS sender id?
  • jQueryMobile, Ajax Navigation, and MVC
  • Which browser have this strange user agent? (IOS device)
  • Does CSS support inheritance [duplicate]
  • Getting different value with placeholder over CPU/GPU
  • Sensibility of combined Maven/Ant+Ivy build management for dual platform Desktop/Android deployment?
  • Why isn't obj.style.left = “200px”; working in this code?
  • Eclipse MTJ doesn't see Java ME SDK 3.0 devices
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Tell Git to stop prompting me for conflicts when none really exist?
  • Pycharm: Marking a folder as 'sources root' is not recursive for subfolders
  • D3 get axis values on zoom event
  • JBoss External Properties Files in Classpath
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • htaccess add www if not subdomain, if subdomain remove www
  • Webgrid not refreshing after delete MVC
  • Mysterious problem with floating point in LISP - time axis generation
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Jquery UI tool tip close icon
  • Display issues when we change from one jquery mobile page to another in firefox
  • Accessing IRQ description array within a module and displaying action names
  • jQuery tmpl and DataLink beta
  • Traverse Array and Display in markup
  • How to disable jQuery.jplayer autoplay?
  • Acquiring multiple attributes from .xml file in c#
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Qt: Run a script BEFORE make
  • apache spark aggregate function using min value
  • How can I remove ASP.NET Designer.cs files?
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal