Tip: Disable AJAX On jQuery Mobile Forms

Anthony James —  July 23, 2012

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

Anthony James

Posts Twitter Facebook

Anthony is a Web Software Developer & Linux Systems Engineer. With 11 years of experience in these fields. He is also the founder and main contributor at Pinehead.tv. He is passionate about passing on his technical knowledge through training and educating others.