Advanced Search

Document Ready with Global Ajax Listener and Status Indicator

/ Published in: jQuery
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(function(){
  2.     /**
  3.      * ATTACH AJAX LISTENER TO BODY TO MAKE A GLOBAL
  4.      * AJAX STATUS MONITOR FOR THE WHOLE PAGE.  ANY AJAX
  5.      * CALL FROM ANY FUNCTION THAT RUNS ON THE PAGE
  6.      * WILL AUTOMATICALLY REPORT ITS STATUS
  7.      */
  8.     $("body").ajaxStart(function(){
  9.        $('#ajax_status_div').html("Ajax Request Sent");//update text message
  10.        $('.activity_indicator').show(); //show ajax activity image(spinner gif)
  11.     });
  12.     $("body").ajaxSuccess(function(event,xmlHttp,options){
  13.         var status = xmlHttp.statusText;
  14.         var url = options.url;
  15.         var data = options.data;
  16.         $('.activity_indicator').hide(); //hide ajax activity image(spinner gif)
  17.         $('#ajax_status_div').html("URL : "+url+"  <br/>  Status : "+status);//update text message
  18.     });    
  19. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.