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.
|
|
 |
 | Fantastic. Brief. To the point.
Sean Devoy | 7:43 1 Feb '09 |
|
|
Perfect article. It had EXACTLY what I was looking for, a brief explanantion which I completely followed and no SAGA about how hard it was to come up with.
I applaud you.
I guess they want more drama in your article. If you do give in to their pety requests, then please provide an "Executive Summary" just like you have here for those who can follow concise thinking.
Well Done.
SD
SD in Maryland, USA
|
|
|
|
|
| volks, what are you talking about? - this IS useful
Arthur Juster | 4:26 9 Mar '07 |
|
|
i don't understand what these guys are talking about
the click-once button solution seems to work from the first try and this alone is already great 
the article is too short? i don't understand that. what they need, a good idea or tons of words?
to the author: don't be disappointed, i think this is great and i'm sure i'll not be alone
good luck and see you in programmer's heaven
archie
|
|
|
|
|
|
|
I second this statement!
The was a elegant solution and a perfect fit.
|
|
|
|
|
| Is this useful?
ednrgc | 9:33 1 Feb '07 |
|
|
Considering the asynchronous nature, why would you ever use this. In the event of a lengthy process, the hourglass will show, but the use will be able to click other tasks.
BTW: This is kind of short to be considered an article.
|
|
|
|
|
|
|
Whether it is useful or not is irrelevant. There are many articles on CodeProject that only apply to a certain niche (when was the last time you used an A* algorythm?), but they are here just in case someome might need them. And while this article may be short, it does provide exactly what the title says so any person wanting to show an hourglass with an update panel can do so.
Cheers to the author. Got my 5.
Aaron
|
|
|
|
|
|
|
I don't believe it's irrelevant. I think using something like this will cause problems.
|
|
|
|
|
|
|
Yes but pointer math can cause problems too, if you don't know what your doing. Its still up to each individual developer to apply some critical analysis on everything they implement. For instance, you combine the technique shown here with another technique for putting a transparent or semi-opaque div layer over the entire page while the hour glass is showing and it certainly wouldn't be a problem. We all have to take into consideration what are users expect, and what they assume. Most users see that hour glass and just sit and wait. Very problematic if you forget to turn it off somehow (been there). You just have to use it the correct way.
It's just another tool we can throw in the box. A hammer is no good without nails, but does that mean its a bad tool?
Aaron
|
|
|
|
|
|
|
|
|
|
I agree. I found this useful, whether others did or not. 
|
|
|
|
|
|
|
No, it's not useful at all. Only to mention his CV.
Sorry, but this should not be here and admins should remove this. Put this on blog but not as an article. I think Codeproject should start to introduce similar rules as MSDN otherwise CP will be full of mess.
|
|
|
|
|
|
|
I agree with Jan. This should have been a blog entry, not an article.
I've been quite disappointed with the poor quality of many recent submissions. I know the CodeProject admins are run off their feet and are trying to find another editor, but disallowing articles like this might be what they need to keep the quality level higher and workload lower.
I am going to report this article, but I'll feel bad doing it because its just making more work for them.
|
|
|
|
|
|
|
Actually "is this usefull?" depends depends on the user, on the task, on the purpose bla bla. But yes, this trick can have his audience.
The main problem is here that this is realy "very short to be considered as an article". Maybe some more explanations about how you found out this solution. Maybe some autorship should be added like what kind of problems are targeted to get solved etc. What people expect from an article is more than this not only scientific or mathematical 2+2=4 style solutions.
|
|
|
|
|
|
|
