Zieglers

Just little about C#, .NET, SQL Server, SharePoint and SAP

Show loading message during AJAX call

Posted by zieglers on December 15, 2010

Here is quick tip on displaying ‘Loading…’ or ‘Operation in progress…’ type of messages while making an AJAX call in your javascript.

Below snippet will show loadingDiv div element whenever an ajax method call is executing and it will hide the message once method call ends.

<div id=”loadingDiv” style:visibility=”hidden”>Operation in progress…</div>

 $(‘#loadingDiv’)
.hide()  // hide it initially
.ajaxStart(function() {
   $(this).show();
})
.ajaxStop(function() {
   $(this).hide();
});



So, in case you need to do additional stuff once ajax call is finished, plug your code in .ajaxStop. Usual suspects are displaying a message to user, going to another page, refreshing page, …etc.

Also you can create your own loading gif images from this site: http://ajaxload.info/

zieglers

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: