Wait a sec!!

  • Article

I got a question today that I think might become a pretty common question.

The request was how can I change my cursor to a wait cursor when I do an AJAX postpack?

The answer is actually very simple. It happens in the Sys.Webforms.PageRequest class.

The AJAX devs were nice enough to let us create client handlers for events around the postback process.

The two events I am going to wire-up are:

Once we have the handlers defined, we are going to change the cursor with a bit of Javacript:

document.body.style.cursor='wait';

This is what my page looks like with the added code:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript" language="javascript">

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler)
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler)

function beginRequestHandler()
{
document.body.style.cursor='wait';
}

function endRequestHandler()
{
document.body.style.cursor='auto';
}

</script>

So that's it. Now here is something to add... if you leave the cursor over the button that invoked the AJAX call, the cursor will change to a normal cursor. This is becasue that's the behaviour for a button. To get around that, add this to your beginRequestHandler():

var butn = document.getElementById("Button1");
butn.disabled = true;

Just make sure you change the name of your button to whatever your button ends up being called in client side code.

That's it for today!