How To Disable Ajax In jQuery Mobile Before Page Load?

javascript jquery html ajax jquery-mobile

53,563

Solution 1

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.

Solution 2

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;
});

Solution 3

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.

53,563

Author by

Nick Chubb

GO DAWGS

Updated on February 02, 2020

Comments

Nick Chubb over 4 years

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 if I disable ajax the page would load fine with the ad together. This only works on the second page I load because I click a link with the tag...

data-ajax="false"

Which makes the next page load perfectly.

Problem: The first page loaded will be overwritten by the adsense ad because ajax is enabled (I think).

Basically the first part of my page looks like this...

<html>
<head>

<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 src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
<script language="text/javascript">

      $(document).bind("mobileinit", function () {

            $.mobile.ajaxEnabled = false;

      });

</script>
</head>
<body>

    <div data-role="header">
        <h1>Angry Birds Cheats</h1>
    </div>



    <div data-role="content">

<div>
    <script type="text/javascript"><!--
  // XHTML should not attempt to parse these strings, declare them CDATA.
  /* <![CDATA[ */
  window.googleAfmcRequest = {
    client: '',
    format: '',
    output: '',
    slotname: '',
  };
  /* ]]> */
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>
</div>

I did try to disable ajax in the code, but I don't think it is because the ad still takes up the entire page...

I was thinking that maybe I could start the visitor at a certain page and redirect them to a page that is non-ajax.

Hans-Martin Mosner almost 8 years

Perfect - I had a similar problem with a HTTP Location header which got AJAXified :-( - of course you can't set a rel="external" attribute on such a header...
SpyderScript over 7 years

Worked for me when the action attribute on a form redirected to a page without jQuery UI, and ajax was forcing jQuery UI styles onto it.
ymakux over 6 years

Looks like mobileinit does't work in 1.4.5. I just set $.mobile.ajaxEnabled = false;