CODEWITHSUNDEEP
jquery-mobile
Rob Kent
Rob Kent

Reputation: 5193

How can I stop jQuery Mobile doing a full page refresh after a certain sequence of page links?

I have my several pages in my jQuery Mobile application and they are all contained in separate files. I have a situation where the first page transitions to the second page using the default Ajax transition. When I click the Back button from page two, I get a normal Ajax reverse transition and the form context of page 1 is the same as when I left, eg selections are all the same. Note that when I click Back, I don't see the 'Loading...' popup message.

I have a third page that is linked to from page 2 and I need this to be data-ajax="false" because it contains Facebook Like tags that must be expanded. I find that if I use Ajax transition, these are not processed. My problem is that after I have done a non-Ajax link to page 3, all subsequent transitions then seem to completely refresh the page, although they are Ajax because I see my standard 'Ajax loading' popup. But because it is a full page refresh, I lose my form context each time, including from page 2 back to page 1. Like this:

Page 1 > Page 2 < Page 1 (all works okay, page 1 is same as when I left it)

Page 1 > Page 2 > Page 3 < Page 2 < Page 1 (transition from 2 to 1 full refresh, probably Ok)

Page 1 > Page 2 < Page 1 (page 1 is reset each time, unlike the initial behaviour for those 2 pages)

So it seems that going through the non-Ajax route has broken the links between pages 1 and 2 even after returning to them afresh.

Has anybody else noticed this behaviour or can suggest a fix for it? Note that all my pages are proper jQuery Mobile-marked-up pages with header, footer and a div with data-role="page"; my back links are these:

<a class="ui-btn-right" data-icon="back" data-rel="back" data-role="button" href="/">back</a>

Upvotes: 1

Views: 2530

Answers (1)

Danielle Vautier
Danielle Vautier

Reputation: 41

If you apply the following attribute data-ajax="false" to your link e.g.

<a class="ui-btn-right" data-icon="back" data-rel="back" data-role="button" data-ajax="false" href="/">

That should fix it.

Mentioned in http://jquerymobile.com/demos/1.0/docs/pages/page-links.html

Upvotes: 1

Related Questions