Share on facebook
Share on twitter
Share on linkedin

Tip: Disable AJAX On jQuery Mobile Forms

Anthony James
Anthony James

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


Get more insights, news, and assorted awesomeness around all things cloud learning.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?