Document Ready with Global Ajax Listener and Status Indicator in jQuery

This will monitor the status of all ajax calls on the page. When ajax starts i show an animated spinner gif and display a message that ajax has been requested. On completion of a call the status returned is displayed and the spinner is hidden to indicate the process is complete. This is without an extra line of code in any of the functions that call ajax, and applies globaly to all functions that make ajax calls on the page.
[javascript]
$(function(){
/**
* ATTACH AJAX LISTENER TO BODY TO MAKE A GLOBAL
* AJAX STATUS MONITOR FOR THE WHOLE PAGE. ANY AJAX
* CALL FROM ANY FUNCTION THAT RUNS ON THE PAGE
* WILL AUTOMATICALLY REPORT ITS STATUS
*/
$("body").ajaxStart(function(){
$(‘#ajax_status_div’).html("Ajax Request Sent");//update text message
$(‘.activity_indicator’).show(); //show ajax activity image(spinner gif)
});
$("body").ajaxSuccess(function(event,xmlHttp,options){
var status = xmlHttp.statusText;
var url = options.url;
var data = options.data;
$(‘.activity_indicator’).hide(); //hide ajax activity image(spinner gif)
$(‘#ajax_status_div’).html("URL : "+url+" <br/> Status : "+status);//update text message
});
});
[/javascript]

Leave a Reply