Control to prevent multiple AJAX submits
AJAX, ASP.NET, UI By Dave Ward on February 12th, 2007“To avoid duplicate credit card charges, only click the checkout button once!”
I’m always surprised at how many sites display a similar warning message on their final checkout page. Major sites. Between server side detection of multiple submissions and using OnClick to disable the submit button, there is no excuse for crossing your fingers and hoping your users don’t double click a submit button.
AJAX complicates the client side component of this equation. You can’t simply disable a button in the OnClick event, because the button will remain disabled in the case of a failed form validation or other exception. The optimal behavior is for the submit button to only be disabled during the async postback, and be re-enabled when the server side processing is completed. Using the AJAXToolKit, I’ve created a control extender to implement this functionality quickly and easily: Postback Ritalin.
Note: If you found this in an attempt to implement a similar effect for non-AJAX, full postbacks then take a look my Disable a button control during postback example instead.
Usage example
<asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Label runat="server" ID="Label" /> <asp:Button ID="Button" runat="server" Text="Click Me" OnClick="Button_OnClick" /> </ContentTemplate> </asp:UpdatePanel> <encosia:PostBackRitalin runat="server" TargetControlID="up1" WaitText="Processing..." />
The TargetControlID specifies which UpdatePanel to watch. WaitText allows you to optionally provide text that is displayed in the disabled button while the async postback happens.
Download
Downloads have been moved to the permanent Postback Ritalin page.
Similar posts
Kick me!
If you found this post helpful, please click below to "Kick" it:
What do you think? Your comments are welcomed.
I appreciate all of your comments, questions, and other feedback, but please try to stay on topic. If you have a question unrelated to this post, I recommend posting on the ASP.NET forums. If you post there and then contact me with a link to the post, I'll try to take a look at it for you.
If you're replying to an existing comment, please use the threading feature. To do this, click the "Reply to this comment" link underneath the comment you're replying to.
Comments
Just left you a message.
The postback with the toolkit (242k) work fine. However, if you were to download just the 3 k download it does not load into VS.
Note: I did not install the toolkit dll with the 242k download as I’d already installed it.
Thanks
I’ll check it out. Glad you got it working. Thanks for letting me know.
Works great. Thank you!
gr8 stuff :)
I’m making my first steps into the AJAX world and just discovered this great site! Congratulations Dave and thanks for the support!
I wonder how can I handle this situation. I have an ajax control that retrieves an email and fires an event on completion, handled in the page containing the ajax control.
How can I continue the non-ajax logic from there? Should I cause a full post back to resume the regular non-ajax logic? If so, how? What do you suggest me to do ?
Thanks ;)
You probably won’t need to do anything special in that case. You can freely mix AJAX and non-AJAX operation in the same page.
If the event triggering a postback is an async postback trigger of an UpdatePanel on the page, that event will occur asynchronously in a partial postback. Otherwise, it will raise a full postback.
Yes Dave, that’s correct. That’s exactly my point.
A button in an update panel generates an asynch postback which performs a process.
At the end of that process, I need to perform page-level tasks, like for example changing the View in a MultiView, or redirecting to a different page.
How can I trigger a full postback once an asynch process has ended? Do you follow what I’m trying to do? It’s like resuming the normal in-synch activity once an asynch process is complete.
Thanks ;)
I was happy to find this control extender and it works great on some pages in my app. In one particular page, there is a main “update order” button (updates an accounting system by web service), a “copy from quote” button, and also a series of “add item to order” buttons, in three separate UpdatePanels.
I used one PostBackRitalin control, and pointed it to the Submit updatepanel. The button in the “copy from quote” UpdatePanel also shows “Processing…” even though I didn’t point a PostBackRitalin at it. And even worse, the buttons in the “add item to order” UpdatePanel now cause a full page postback (with browser inidicating javascript error).
Is this something that you’ve heard of before and might have some hints?
Yes, it’s a known problem with the extender. I have plans to update it to resolve issues with more complex forms, remove the toolkit dependency, and add a few other improvements.
Unfortunately, I don’t have a specific ETA on the rewrite at this time.
Well, I take that back. I decided to stop dragging my feet and put together an initial rewrite of the extender as a true server control.
It now allows you to specify a collection of UpdatePanel ClientIDs to act on, and will correctly respect that.
If anyone wants to help me beta test this, send me an email and I’ll send you a copy of the new version to try out.