How To Disable Ajax In jQuery Mobile Before Page Load?

Question

On my mobile website. I\'ve been trying to load Adsense Mobile ads, but they continue to take up the entire page after the page loads itself.

I did figure out that i

Answer 1

A helpful page to understand jquery mobile ajax behavior

http://jquerymobile.com/test/docs/pages/page-links.html

To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via 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.

Answer 2

Check-out the docs for binding to the mobileinit event: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

Specifically this bit:

Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded.

Here is the proper format for binding to the mobileinit event:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>

First the jQuery Core (so .bind() will be available), then the mobileinit event handler, then the jQuery Mobile js file (this is last so the event handler for mobileinit will be set before the event is fired).

You can test that your current mobileinit event handler is not firing by putting an alert in the function.

Answer 3

The updated jQuery Mobile documentation is here: http://jquerymobile.com/test/docs/api/globalconfig.html

Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before the document.ready event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.

The mobileinit event

When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit.

$(document).on("mobileinit", function(){
  //apply overrides here
});

Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

You can override default settings by extending the $.mobile object using jQuery's $.extend method.

$(document).on("mobileinit", function(){
  $.extend(  $.mobile , {
    foo: bar
  });
});

Alternatively, you can set them using object property notation.

$(document).on("mobileinit", function(){
  $.mobile.foo = bar;
});

Answer 4

Disabling a per-page solution work great with data-ajax="false" on the Anchor tag