Return to Snippet

Revision: 60003
at October 15, 2012 09:19 by halk


Initial Code
$(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
    });    
});

Initial URL


Initial Description
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.

Initial Title
Document Ready with Global Ajax Listener and Status Indicator

Initial Tags
ajax

Initial Language
jQuery