SKFox

If you are going to copy/paste the page for use on your computer, please remove the reference to http://skfox.com/mint and the google analytics script at the bottom. Otherwise, I get a bunch of clicks/statistics on my server that corresponds to your testing.

Alternatively, you can download all of the jQuery examples in a zip file.

Rick Strahl has been doing some great posts about jQuery on his blog. Yesterday he posted about an excellent resource, ajaxload.info, for creating ajax activity indicators. The second jQuery example that I’d like to share concerns how to display those images on each ajax call. Here is the relevant jQuery code:

The first two jQuery snippets are placed in the $(document).ready function. The HTML body has a div appended to it that will hold the loading image. We then set the CSS properties of that div to hide the image and define the placement.

The last snippet is outside of the $(document).ready function and serves to bind the visibility of the ajaxStart and ajaxStop jQuery events.

Now, everytime an ajax call is placed back to the server, a animated gif image will display in the upper right hand corner of the page to indicate background ajax activity. When the request is finished, the image will hide itself again.

See the demo and view the source to learn more. In this demo, your message is POSTed via ajax to the server which sleeps for 3 seconds then outputs your message into a message box. Make sure to peak at the upper right side of the page to see the activity indicator.

Thanks go out to jQuery for their awesome framework and Mike Alsup, the jQuery Form plugin author, for such a great plugin.

8 Responses to “jQuery Example: Ajax activity indicator”

1. Chinuku says:

   August 17, 2008 at 11:40 pm

   its really Nice and helps me a lot!!
2. Ashish says:

   September 28, 2008 at 11:03 pm

   Hi Shaun ,

   Nice One !! This is very nice example of Ajax Load Indicator .I was really looking for such stuff since long time . I tried this example but still not getting any output this is my code

   First jQuery Test

   $(“body”).append(‘

   ‘);

   $(‘#ajaxBusy’).css({
   display:”none”,
   margin:”0px”,
   paddingLeft:”0px”,
   paddingRight:”0px”,
   paddingTop:”0px”,
   paddingBottom:”0px”,
   position:”absolute”,
   right:”3px”,
   top:”3px”,
   width:”auto”
   });

   $(document).ajaxStart(function () {
   $(‘#ajaxBusy’).show();
   }).ajaxStop(function (){
   $(‘#ajaxBusy’).hide();
   });

   This is My Changed Test Page

   PLease help me i really need it !!
3. bitsandscripts says:

   October 4, 2008 at 8:22 am

   thanks for the hint…

   @Ashish
   check the source of this page http://skfox.com/jqExamples/AjaxActivity.html...
4. Frank says:

   December 28, 2008 at 10:34 am

   I have tried everything getting this to work, then again, I am new to JQuery. Both IE and FF not working with it. I placed the first two snippets in the $(document).ready function and the ajaxStart and ajaxStop out of the .ready function. Also, just curious, if there is no call to the server, but a function is working, does it still show the indicator?
5. Sean says:

   April 25, 2009 at 4:32 pm

   The last part works much better this way:

   $(document).ajaxStart(function () {
   $(’#ajaxBusy’).show();
   });
   $(document).ajaxStop(function (){
   $(’#ajaxBusy’).hide();
   });
6. Shaun Kester says:

   May 7, 2009 at 12:29 pm

   @sean: Why do you think that? Works better how? Why not take advantage of jQuery chaining, it’s faster.
7. Shaun Kester says:

   May 7, 2009 at 12:35 pm

   @frank: An ajax call must be made to the server for it to work. If you are testing locally, i.e. http://localhost, the request could be quick enough that the indicator doesn’t have time to show up.
8. Jaroslaw Dobrzanski says:

   June 9, 2009 at 10:19 am

   If you use prototype.js have a look there: http://dobrzanski.net/2007/04/23/ajax-activity-indicator/