Skip to main content

Tip: Disable AJAX On jQuery Mobile Forms

Posted on July 23, 2012 by Anthony James Founder/CEOAnthony James Founder/CEO

By default jQuery Mobile uses AJAX for page navigation and submitting forms. This allows AJAX to asynchronously load pages without having to navigate away from a current page or away from a form. This helps our jQuery Mobile web applications run more smoothly and more like those native apps built with Java and Objective-C.
However, sometimes we need to be able to submit our forms without using AJAX. Depending on what we are doing with our forms, AJAX can actually cause errors and problems. In this tip I’ll show you two separate ways to disable AJAX, first on the individual form level and then on the global scale.

1. Disable AJAX on an individual form basis
In this method we are going to give the tag a data attribute that tells the form not to use AJAX upon submit. We disable AJAX by passing the data-ajax=”false” data attribute to the <form>tag. It will look like</form><form action=”” method=”” data-ajax=”false”></form><form>.

2. Disable AJAX globally for all forms and page navigation
We also have the option to disable AJAX on a global scope that prevents jQuery Mobile from using AJAX for it’s page navigation or for form submission. We do this by placing some simple JavaScript code into the header of our jQuery Mobile app. Essentially we are using jQuery Mobile API’s to disable AJAX.$(document).bind(“mobileinit”, function() { $.mobile.ajaxEnabled = false; });


Leave a Reply

Your email address will not be published. Required fields are marked *