Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery mobile force full reload when link clicked

I have a "normal" link in my jqm page like this:

<a href="http://www.mysite.com/mobile/page.php?attribute=value">

And if I click it it won't properly refresh taking into account the attribute value and loading everything that's needed for it dynamically based on the attribute value. I understand that this is due to the fact that jqm tries to do an ajax call like mentioned here:

 When you use pageChange an Ajax request will be made to that url and it will be
 loaded only the content inside the div with data-role="page". So everything you
 have out of this element will be ignored (JS and CSS).

So, I found out in the docs that I should use $.mobile.ajaxEnabled=false; or rel=external on links or target=_blank on the link.

Strange thing though for me is that only when I set the target=_blank property to my links will this truly happen. So, am wondering if someone had this kind of a problem and how did you solve it? The thing is, I would like to refrain myself form using target=_blank as it opens a new tab in my browser (as expected, but this is not nice from users' POV).

jqm version I use is 1.2

like image 794
Nikola Avatar asked May 15 '13 07:05

Nikola


1 Answers

This question now at the top of google search results, so figured I'd answer:

Use the data-ajax attribute and set it to false to force reload upon clicking a link:

data-ajax="false"

use it like:

<a href="/" data-ajax="false">
    <img id="mainLogo" src="logo.svg" width="215" />
</a>

And then your link will force reload the page!

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.

Parts taken from https://stackoverflow.com/a/22951472

like image 127
Danny Avatar answered Oct 30 '22 20:10

Danny