jQuery Ajax Loading using ajaxStart/ajaxSetup

By Sam Deering

Quick jQuery code snippet examples on how to use jQuery.ajaxStart and jQuery.ajaxStop functions. Examples below.

Using ajaxStart and ajaxStop methods

The example below we have used it to display a loading image and disable a form submit button once it has been clicked while the ajax request is being processed. And then when it returns the image is hidden and the submit button becomes available again.

var $form = $('#form');

      $form.find('.submit').attr('disabled', 'disabled');

Using inserted code before ajax

Another method might be to add the image before the ajax call.

//show loading image, disable submit button
$form.find('.submit').attr('disabled', 'disabled');

And then add a complete handler to the ajax function.

//hide loading image, enable submit button again
complete: function()

Using ajaxSetup()

A further method is to use jQuery.ajaxSetup so that the image is hidden and form enabled when all ajax requests are returned “completed”.

$.ajaxSetup( {
   complete:function() {
  • Brooks Boyd

    Note that for jQuery 1.6 and beyond, the “disabled” state of an element should be manipulated with the .prop() function, rather than .attr(), so “$form.find('.submit').prop('disabled', true);” and “$form.find('.submit').prop('disabled', false);” should be used instead.

  • Noob

    How are their scopes? Are they working on the whole jQuery object or other scope?

  • Guest


  • Guest




Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.