powered by Slim Framework
enhanced by Nesbot.com

jQuery: Global AJAX Events for Start, Stop, Complete, or Error

Published on Dec 12, 2011 by Jamie Munro

Your website contains a lot of AJAX requests using jQuery and you want to add a global event at the start or finish of the AJAX request, e.g. add a spinning icon, or handle all AJAX errors in a particular fashion.



Solution


The jQuery library provides multiple events for all AJAX requests: http://api.jquery.com/category/ajax/global-ajax-event-handlers/

These events are a great way to easily add uniformity to how you handle AJAX requests.  For example, perhaps you have a very busy website that on occasion an AJAX request doesn't complete and an error is returned.  When there is an error, you could show a standard error dialog asking the user to try again.


$(document).ajaxError(function() {
$("#error").show();
});


Or if you want to always show a loading element when the ajax request starts and hide it when it's done you could do the following:


$(document).ajaxStart(function() {
$("#loading").show();
});

$(document).ajaxStop(function() {
$("#loading").hide();
});


If you want to get more information about the AJAX request, you could update the above calls to pass a variable in the function:


$(document).ajaxStart(function(e) {
$("#loading").show();
});

$(document).ajaxStop(function(e) {
$("#loading").hide();
});


Then you can use the variable e to access some of the properties.  For example:


console.log(e.currentTarget.activeElement);


Will tell you what element made the AJAX request.  Inside of Firebug if you perform a console.log(e);  you can see all of the properties available of that object.

Tags: Javascript | jquery

<- MVC 3: Accessing the RouteData inside of your code  Home jQuery: Implementing a callback -> 
blog comments powered by Disqus