Click here to Skip to main content
Click here to Skip to main content
Go to top

Some Ajax Tips and Tricks

, 26 Feb 2007
Rate this:
Please Sign up or sign in to vote.
This code snippet shows how to display an hourglass on an AJAX web page, and also how to create a click once button

Introduction

Microsoft Ajax 1.0 has just been released!

In synchronous web forms, it's easier to interact with the user, because he/she sees the page flashing back and processing (which is undesirable). With Ajax, you can add an update progress panel, and put an animated GIF inside. But what if you want to display an hourglass? In this article, I will show you two tricks.

Display an Hourglass

The following JavaScript code snippet nicely does the job:

<scriptmanager id="ScriptManager1" runat="server" />
<script language="JavaScript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    function InitializeRequest(sender, args) {
     document.body.style.cursor = "wait";    
    }
    function EndRequest(sender, args) {
     document.body.style.cursor = "default";    
    }
</script>

I have received several criticisms due to the length of this article, so I have decided to rename it as: some Ajax tips & tricks.

Click-once Button Control

Lots of attempts have been made to create a click once button...Some of them are quite complex like this one.

I've been searching the internet for a click once submit button, but without success. Some of them cause post-back, which is undesirable, while others don't work with validation controls. And it's so useful because it prevents users from clicking twice on the same button, thus leading to possible bugs and misleading behavior.

Combining the content of the first tip, we can achieve a good result, as shown in the picture below:

<scriptmanager id="ScriptManager1" runat="server" />
<script language="JavaScript">

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

var btn;

function InitializeRequest(sender, args) 
{
 document.body.style.cursor = "wait";                
 var btnId=args._postBackElement.id;
 btn= document.getElementById(btnId);
 if (btn.type=="button" || btn.type=="submit") 
   btn.disabled=true;
}

function EndRequest(sender, args) 
{                
 document.body.style.cursor = "default";    
 if(btn!=null) btn.disabled=false; 
}
</script>

Code Explanation

In the InitializeRequest function, we retrieve the pressed button id by retrieving the _postBackElement which is passed as an argument, and after we verify if it is a button.
We must declare the button variable as a global variable, to allow the EndRequest function to know which button fires the event.

Note that the above function will work ONLY if the button control is inside an UpdatePanel. And that's it! We have a click-once button! We can even put it in a MasterPage to propagate behavior to your content pages.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

desalbres
Software Developer (Senior) Messages S.A.S
France France
I am Web Developer at Messages, a printing company in Toulouse, France. I particularly enjoy ASP.NET MVC, JQuery, Silverlight...I have over 10 years experience in developing software, always using Microsoft Technologies.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 Pinmember77harliraha2-May-11 12:52 
GeneralFantastic. Brief. To the point. PinmemberSean Devoy1-Feb-09 6:43 
Generalvolks, what are you talking about? - this IS useful PinmemberArthur Juster9-Mar-07 3:26 
GeneralRe: volks, what are you talking about? - this IS useful Pinmemberkenlarose8-Jun-07 10:45 
QuestionIs this useful? Pinmemberednrgc1-Feb-07 8:33 
AnswerRe: Is this useful? Pinmemberaprenot1-Feb-07 9:07 
GeneralRe: Is this useful? Pinmemberednrgc1-Feb-07 9:10 
GeneralRe: Is this useful? Pinmemberaprenot1-Feb-07 9:16 
GeneralRe: Is this useful? Pinmemberednrgc1-Feb-07 9:20 
GeneralRe: Is this useful? PinmemberThyris8-Mar-07 10:42 
AnswerRe: Is this useful? PinmemberJan Seda1-Feb-07 9:14 
GeneralRe: Is this useful? PinmemberDoug K. Wilson1-Feb-07 14:23 
AnswerRe: Is this useful? PinmemberDaron Yöndem1-Feb-07 12:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140905.1 | Last Updated 26 Feb 2007
Article Copyright 2007 by desalbres
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid