To bring us all up to the same level, when an AJAX request is made the browser's "loading" indicator (the ball, orb, "e," "N," globe, etc.) does NOT spin as it does when a full page is loading. While that's probably okay, it leaves user wondering what's going on. Luckily the status bar on most browsers will still present a percentage loaded bar for the AJAX request, but that's way at the bottom of the browser (and Safari doesn't have a status bar at the bottom) so the user may still be left wondering.
Most sites have some kind up update notification animation to let the user know that an update is occurring. Unfortunately for our users, this is left up to the site designer or page developer, and can even be absent entirely. This is the problem: update indicators are no longer something a user can depend on; their positioning, style, and even their presence is subject to change site-to-site... and even page to page.
One common form of letting a user know that a page is being loaded/updated (whether in web or local application context) is by changing the mouse cursor to "busy." I've never quite understood why an AJAX request wouldn't cause the user's mouse cursor to toggle over to the "busy" state while the update is in process, then toggle back to "normal" when the request is complete. Granted, the rest of the page may (or may not) be accessible during the asynchronous update, but prompting the user with a status indication right at their mouse has always been a ubiquitous bit of UI, why not use that in a web application? Once one has decided that it's a good idea, how does one accomplish that in ASP.NET AJAX?
First, create a javascript file (I called mine ajaxmousecursor.js and put it in a folder named js on the root of my project) which contains the following code:
var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest); function InitializeRequest(sender, args) { $get('divPageContainer').style.cursor = 'wait'; } function EndRequest(sender, args) { $get('divPageContainer').style.cursor = 'auto'; }
One item of note, 'divPageContainer' is the of the div that contains your page; our rules will only apply to the mouse while it's in that div. If you use a different name for your container div use that instead; if you don't use a page container div you might consider it, or fall back to the div of the content that you're updating (I prefer the former).
Next, since we're talking about ASP.NET AJAX, I'm assuming you already have a ScriptManager reference on your page, if not you'll need one to use any ASP.NET AJAX or AJAXcontrolToolkit controls, but you don't "need" one for this trick little snippit, but to keep everything in the context of ASP.NET AJAX I'll show the proper usage in that environment (otherwise, just call the script using a script tag with a src reference).
<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference path="/js/ajaxmousecursor.js" /> </Scripts> </asp:ScriptManager>
That's it! Whenever your mouse is inside the page container div and an AJAX call is made the cursor will change to a "busy" or "wait" cursor while the request is executing and back to normal when the request completes.
UPDATE:
I was having some problems with MSIE throwing a JavaScript exception (but still working), so I've re-wrote a bit of the .js to handle this error, as well as handle any instances with the code is called on a page where the named div does not exist:
var prm = Sys.WebForms.PageRequestManager.getInstance();if (prm) {
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
}var oElement = document.getElementById('divPageContainer');
function InitializeRequest(sender, args)
{
if (oElement) oElement.style.cursor = 'wait';
}function EndRequest(sender, args)
{
if (oElement) oElement.style.cursor = 'auto';
}
Enjoy!
Sources: Encosia, AJAX.ASP.NET docs