jQuery Ajax Loading using ajaxStart/ajaxSetup

jQuery AJAX Loading with ajaxStart() and ajaxStop()

This guide demonstrates using jQuery's ajaxStart() and ajaxStop() methods to manage loading indicators during AJAX requests. We'll cover several approaches, including using these methods directly, incorporating them into AJAX calls, and leveraging ajaxSetup().

Method 1: Direct Use of ajaxStart() and ajaxStop()

This method displays a loading image and disables a form's submit button while an AJAX request is in progress. Once the request completes, the image is hidden, and the button is re-enabled.

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

$form.find('.loading')
  .hide()
  .ajaxStart(function() {
      $(this).show();
      $form.find('.submit').attr('disabled', 'disabled');
  })
  .ajaxStop(function() {
      $(this).hide();
      $form.find('.submit').removeAttr('disabled');
  });

Method 2: Loading Indicator Before and complete Handler

Alternatively, you can show the loading indicator before the AJAX call and use the complete handler to hide it.

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

// AJAX call
$.ajax({
    // ... your AJAX settings ...
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});

Method 3: Using ajaxSetup() for Global Handling

For a global solution affecting all AJAX requests, use ajaxSetup(). This hides the loading image and enables the form after all AJAX requests complete.

$.ajaxSetup({
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});

Frequently Asked Questions

The following Q&A section addresses common questions about using ajaxStart(), ajaxStop(), and related jQuery AJAX methods. Note that the original FAQ section has been condensed and rephrased for clarity and conciseness.

• ajaxStart() Purpose: ajaxStart() executes a function when an AJAX request begins and no other requests are active. It's ideal for displaying loading indicators.

• Showing a Loading Spinner: Create a spinner element (e.g., <div id="spinner">). Use <code>$(document).ajaxStart(function(){ $("#spinner").show(); }); to display it.

• Hiding the Spinner: Use $(document).ajaxStop(function(){ $("#spinner").hide(); }); to hide the spinner when all AJAX requests complete.

• ajaxStart() with Specific Requests: Bind ajaxStart() to the element initiating the AJAX request (e.g., $("#myButton").ajaxStart(...)).

• ajaxStart() vs. ajaxSend(): ajaxStart() triggers only when no other AJAX requests are running; ajaxSend() triggers for every request.

• Error Handling: Use ajaxError() alongside ajaxStart() to handle errors. For example: $(document).ajaxStart(...).ajaxError(function(event, jqxhr, settings, thrownError){ ... });

• Combining with Other AJAX Methods: ajaxStart() works with other jQuery AJAX methods (ajaxStop(), ajaxComplete(), ajaxError(), etc.).

• Using with Shorthand Methods: ajaxStart() functions with shorthand methods like $.get() and $.post().

This revised response provides a more concise and organized explanation of jQuery AJAX loading techniques, addressing the key aspects and common questions. The image remains in its original position.