Document Ready with Global Ajax Listener and Status Indicator

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

Choose a language for easy browsing: