CODEWITHSUNDEEP
jqueryjquery-mobile
Jordan Reiter
Jordan Reiter

Reputation: 21032

jQuery mobile loading when it shouldn't, even with ajaxEnabled set to false

I have seen this related question where jQuery mobile loads into DOM. However, in that case, ajax loading was enabled and he was using window.location to move across pages.

I am not using window.location, just normal hyperlinks, and I have turned off ajax loading:

$(document).ready(function() {
    // disable page transitions
    $.mobile.ajaxEnabled = false;
    $.mobile.defaultPageTransition = 'none';
    }

Nonetheless, if I:

  1. Start on page A
  2. Click a link to page B
  3. Click the back button on my Android phone
  4. Click a link to page C

The following happens:

  1. Page C loads in its entirety, including all JavaScript and media
  2. The [loading...] graphic appears
  3. The content of page A loads into the page

This is not reliable; sometimes the content is from an even earlier page.

Note that in step 3, clicking the jQuery mobile-generated back button results in the same behavior.

Note that this even happens for links which are explicitly marked as data-ajax="false".

Also, this does not occur on desktop browsers, only Android (and it also appears to happen in the iPhone, although I've only tested it via the simulator).

Upvotes: 0

Views: 2200

Answers (1)

Jordan Reiter
Jordan Reiter

Reputation: 21032

Looks like this was caused by pushState.

From the official documentation:

Important: rel="external" and $.mobile.ajaxEnabled=false

Slightly different implementations of the replaceState API in various browsers can cause odd behavior in specific scenarios. For example, some browser implementations (including desktop browsers) implement the popstate event differently when linking externally and moving back to a page onto which state has already been pushed/replaced. When building a jQuery Mobile application where the ajax navigation is being explicitly disabled, either through the frequent use of rel="external" on links or by disabling Ajax navigation completely via the $.mobile.ajaxEnabled=false, we recommend disabling the pushState feature to fall back to the hash based navigation for more consistent behavior.

All it took was adding code to disable pushState in the header:

<script src="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
    $.mobile.pushStateEnabled = false;
</script>

Now it works!

Upvotes: 2

Related Questions