PostBack Ritalin
PostBack Ritalin is an ASP.NET AJAX server control to help simplify the common task of disabling buttons during partial postbacks.
PostBack Ritalin depends on the ASP.NET AJAX extensions. If you’re using ASP.NET 3.5, you’re all set. If you’re using ASP.NET 2.0, make sure you have the AJAX extensions property installed and configured before attempting to use PostBack Ritalin.
Properties
PreloadWaitImages: Boolean value which controls preloading of WaitImages. Defaults to true.
WaitImage: String value specifying an alternate image URL to be displayed during partial postbacks. If this is not specified, ImageButtons will be functionally disabled, but visibly unchanged during partial postbacks.
WaitText: String value specifying replacement text for any Button controls, displayed only during partial postbacks (e.g. “Please Wait”, “Processing…”, etc). If omitted, defaults to “Processing…”.
MonitoredUpdatePanels: An optional collection of UpdatePanels to monitor. If specified, then only the specified UpdatePanels will activate PostBack Ritalin. If omitted, any UpdatePanel on the page will active PostBack Ritalin. See usage example and sample website for syntax.
MonitoredUpdatePanel Properties
DisableAllElements: If the DisableAllElements property of a MonitoredUpdatePanel is set to true, partial postbacks raised within that UpdatePanel will disable all of the Button, ImageButton, and LinkButton controls inside that UpdatePanel instead of just the one that triggered the partial postback.
UpdatePanelID: The control ID of the UpdatePanel to monitor.
WaitImage: Same functionality as the master WaitImage, but specific to the particular UpdatePanel specified by UpdatePanelID.
WaitText: Same functionality as the master WaitText, but specific to the particular UpdatePanel specified by UpdatePanelID.
Usage examples
Basic usage. In the following example, when Button1 is clicked, its text will be replaced with “Processing…”, it will be blurred, and it will be disabled. When the partial postback completes, it will revert to its previous state.
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button_OnClick" /> </ContentTemplate> </asp:UpdatePanel> <encosia:PostBackRitalin runat="server" />
Example of using the MonitoredUpdatePanels collection to restrict PostBack Ritalin to only activate on events triggered from certain UpdatePanels. In the following example, only events from UpdatePanel1 will cause Button1 to be disabled during partial postbacks. Events occurring in UpdatePanel2 will be unaffected.
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button_OnClick" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Button ID="Button2" runat="server" Text="Click Me" OnClick="Button_OnClick" /> </ContentTemplate> </asp:UpdatePanel> <encosia:PostBackRitalin ID="PostBackRitalin1" runat="server"> <MonitoredUpdatePanels> <encosia:MonitoredUpdatePanel UpdatePanelID="UpdatePanel1" /> </MonitoredUpdatePanels> </encosia:PostBackRitalin>
Download
Changelog
v1.1 (4/12/2010)
- Compatibility update for ASP.NET 4.
v1.0 (4/6/2009)
- Added disable all elements functionality to MonitoredUpdatePanels.
- Fixed a bug in the WaitImage preloading functionality, that prevented the MonitoredUpdatePanels’ WaitImages from being preloaded.
- Added both debug and release versions of the JavaScript resource. Your site’s compilation mode will determine which script version is embedded.
- Fixed a problem handling postbacks raised by Button controls that have their UseSubmitBehavior property set to false.
- Improved ClientID handling in naming containers.
v0.10 (6/30/2008)
- Complete rewrite of the JavaScript component of the control. Instead of global variables and functions, PostBack Ritalin is now a proper JavaScript prototype object. This significantly minimizes its namespace impact on the DOM.
- JavaScript embed is now minified.
- By popular demand, added support for disabling LinkButtons.
- Added optional image pre-loading for WaitImages. Previously, disabled ImageButtons could take a bit too long to show their disabled image the first time, due to HTTP delay. Enabling pre-loading will cause the browser to pre-fetch and cache the disabled images, resulting in instant feedback for the disabled state.
- Several bug fixes, based on your invaluable feedback.
v0.9 (1/30/2008)
- Resolved all remaining issues with master pages. Nested naming containers should no longer cause any issues.
- Added the ability to provide UpdatePanel specific WaitText and WaitImage properties for each MonitoredUpdatePanel.
- Added correct handling for virtual paths in all WaitImage properties.
- Added CSS to change cursor style to “wait” when hovering over the disabled control.
- General improvements to client side code.
v0.8 (1/13/2008)
- Removed Toolkit dependency (no more build mismatches!).
- Added MonitoredUpdatePanels collection, to control which UpdatePanels events are handled for.
- Potentially fixed master page issues.
v0.5
- Updated build to target the latest Toolkit (11119).
v0.4
- Updated build to target the latest Toolkit (10920).
v0.3
- Updated build to target latest Toolkit (10618).
v0.2
- Added WaitImageURL, to better support ImageButton controls that raise postbacks.
- Added a check to ensure that the control raising the postback is either an ImageButton or Button type, to clear up some issues with submitting a form with enter while a Textbox is focused.
- Added a check to make sure the control that raised the postback still exists after the postback completes, in case the newly updated div no longer contains that element (e.g. a form that transitions to a confirmation message)
v0.1
- Initial release


Thank you! I was able to follow the same line of reasoning that you described, except using the object model of the 3rd party control I am using.
Good stuff!!
Why don’t you integrate this into the AJAX control toolkit? This is good concept and the masses should get this with a simple download of the AJAX control toolkit.
I think I’m probably going to go the other way with it and make it standalone. The Toolkit dependency has caused me no end of headache.
Hi, it’s a great extender, but can you also support the linkButtons? I’d appreciate if I could also see the source code…
I believe adding LinkButton support would be pretty easy. I’ll put that on my list of things to do.
For those of us not using Visual Studio, what does the Assembly registration look like for your control?
Like so:
Thanks. Worked like a charm.
Another question. Does the WaitImageURL property only apply for image buttons? The behavior I was expecting was for my button to be replaced by a waiting image.
Yes, it only uses the image replacement if the control that raises a partial postback is an ImageButton control.
Dave
This extender is great! But I think I might have found a bug. I’m trying to use it with an ImageButton, and it seems that the WaitImageURL property isn’t acting as intended. I debugged with FireBug and found this code:
_partialUpdateBeginRequest : function(sender, e)
{
$get(e._postBackElement.id).disabled = true;
if (e._postBackElement.type == “submit” && this._WaitTextValue != “”)
{
this._oldValue = $get(e._postBackElement.id).value;
$get(e._postBackElement.id).value = this._WaitTextValue;
}
else if (e._postBackElement.type == “image” && this._WaitImageURL != “”)
{
this._oldImageURL = $get(e._postBackElement.id).src;
$get(e._postBackElement.id).src = this._WaitImageURLValue;
}
}
Should that else if contain (e._postBackElement.type == “image” && this._WaitImageURLValue != “”) instead? this._WaitImageURL is undefined while this._WaitImageURLValue matches up with the WaitImageURL property.
You’re absolutely right. I have no idea how that slipped through the cracks. Thanks for pointing it out to me.
I just uploaded a corrected version.
Awesome, thanks!
Updated to version 0.8.
Massive changes this version, including removal of the Toolkit dependency and properly being able to target only certain UpdatePanels.
Give it a try and let me know what you think.
Is that possible to use imagebutton within monitored update panel like:
I tried this but it’s not working. If I remove the monitoredupdatepanel, it works like a charm. Any idea?
Thanks,
Try that again with <pre lang=”asp”></pre> around the code.
My problem is that I have three update panels and I’d like to use a different image for each panels. So my idea was having three monitored update panel with different image in it. and I used the following code:
Updated to version 0.9. The new version adds a couple new features and a couple bugfixes, thanks to Chris’ feedback. Thanks, Chris!
Support for LinkButtons would be great.
That shouldn’t be difficult. I’ll add it in the next build.
Hi,
args.get_postbackBackElement() can return null in which case asking for the type gives a null reference (using v0.9)
And so can sender._postBackSettings.sourceElement
Thanks for the bug report, Robert. Those problems should both be fixed in v0.10
Excellent, works great right out of the box Thanks!
Hi the ajax control toolkit is updated.
thanks for attention.
This isn’t dependent on the Toolkit anymore. The current download should work with any Toolkit version.
Dave, any plans to release the source or add support for LinkButton. We use as many link buttons as regular ones. Thanks!
LinkButtons are something I plan on handling, but I haven’t decided how best to do it. Since <a> elements don’t have a disabled property, it’s a bit more tricky than with regular buttons and image buttons.
Dave, the control works fine, however, when in design view, the controls on the page do not render and an error is displayed. It reads, “Error Creating Control – Content1 ‘encosia:PostBackRitalin’ could not be set on property ‘MonitoredUpdatePanels’.
This isn’t a problem for me, but the designers on my team are complaining. Do you know what is causing this. This is within a master page. Thanks!
I have to confess I rarely remember to test my controls in design view, because I never use it myself.
It’s probably something minor. I’ll take a look at it and get it fixed.
I haven’t been able to reproduce this. Could you email me a representative site/project?
Thanks, Dave.
I’m using your control on the page within the master page with only one UpdatePanel.
The control works fine when I use MonitoredUpdatePanels collection – but I’m getting the same error msg in the design view as Brian above (Error Creating Control – Content1 ‘encosia:PostBackRitalin’ could not be set on property ‘MonitoredUpdatePanels’).
When I use the control without MonitoredUpdatePanels collection (Basic usage) the control does not work.
You can safely ignore that error. It doesn’t actually affect anything.
If you’d like a pre-release build that fixes that, send me an email that I can reply to with the attachment.
Do you have any plans to implement “Sorting” on gridviews?
Example, I have a search form. Clicking the button triggers the event, but columns sorting does not trigger this to lock the button.
Do you have any instructions on how to do this or plans to implement this into the control?
That should be possible when I add LinkButton disabling to it in the next build. It’s just a bit problematic to implement since I can’t disable <a> elements the same way as Buttons and ImageButtons.
Should be coming soon.
To be honest, I think that option was a lot better in theory than practice. It’s such a small area affected, the pointer change isn’t very useful anyway.
I’m going to remove that feature. I’m not quite ready to release the next build yet, but I’ll email you a version with that option removed later this afternoon.
I have noticed another issue. I have a set of navigation buttons to navigate through pages of an asp:MultiView. The next button is disabled on the last page, and the previous button is disabled on the first page. When the Postback Ritalin extender is applied, the enabled state is overriden with true. i.e. The next/previous buttons are always enabled after clicking on them once. Obviously, a workaround would be to put them in a separate update panel, but its not exactly elegant.
Can you email me a representative sample? I’ll check it out.
Beautiful control, thank you!
One question… is there a way to set the Wait text in the codebehind? I need to change it programmatically as my website is localized so the text should be multilingual as well.
Thanks a lot!
Radoslav
During the initial page load, you should be able to set it programmatically, as long as you do it before the PreRender event. Something like this:
I’ve encountered an error caused by the fact that you check for the existence of a control before checking to see if the panel is monitored. Specifically the line of code in the EndRequest handler, PBR_EndRequest(sender, args), and is
if ($get(sender._postBackSettings.sourceElement.id) != null && PBR_IsMonitoredRequest(sender._postBackSettings.panelID))
I have a GridView and when I add default pager controls, they are implemented as <input type=”image”….> having no ID. The $get method throws an exception because the ID defaults to “” and $get fails on this. The GridView is an update panel that is not monitored by PBR, so if the conditional components were switched I don’t think the error would occur. Better yet, make sure that ID is not empty and null before calling $get. Unfortunately without the code, I’m stuck and can’t use the control (which I really like) on the page.
Thanks,
Richard
Take a look at the beta of the next version, and let me know if it fixes that for you. It includes more sanity checking for things like that.
Thanks for your fast reply. Unfortunately, the lastest Beta generates an error from the following inserted script in the page.
Probably something I doing wrong, but my work-around (see following post) gets me through for the time being.
Thanks,
Richard
That’s an unrelated error that I wasn’t aware of. I just fixed it and emailed you an updated DLL.
Give it a try, if you don’t mind.
Added information: The controls used in the Pager row for a GridView are ImageButton controls (that was mangled in the previous post).
Here’s a work-around: I handled the RowCreated event for the GridView and added an ID for the ImageButton controls and that solved the problem. This of course has the added benefit that I could use I suppose PBR on these controls. Here’s the RowCreated event handler.
Thanks again for this excellent work! One question – is it possible to disable all buttons in an UpdatePanel instead of just the one that initiated the partial postback?
Not yet, but almost certainly in the next release.
I have a couple of different validation groups, and the postback stuff works as I expect except the Page Validation is alwasys false..
Any idea how to track this down?
UPDATE: It actually causes validation issues when I’m monitoring one specific update panel .. If I just have the control on the page, it runs fine.
I have no idea what would cause that. I’ll add it to my test cases and try to track it down in the next release.
So this is a fun one. If you set the UseSubmitBehavior=”false” on the button that caused the postback, PostBackRitalin won’t run. Is there any way to get around that?
I found this out because of the Firefox+UpdatePanel+asp:Panel defaultButton problem described here.
Thanks for the bug report.
I emailed you a potential fix. Let me know if that clears it up.
The fix you emailed corrects the issueJust tested it. Thanks, and kudos on your extremely speedy response! ;)
Hmm. I can put this in an empty .aspx file and it works fine. Copy and paste the same code into my project’s .aspx and it doesn’t do anything (no buttons are grayed out and the button’s text doesn’t change). I tried putting it in multiple places in the code and using multiple buttons and none of them have any effect. Odd, but I don’t have time to look into it. I don’t use UseSubmitBehavior=”false”, so whatever is wrong seems to not be mentioned on this page thus far. Can’t give out my code (and it’s too long anyway), so I guess nothing can be done.
I’m assuming your existing project’s ASPX is properly ASP.NET AJAX enabled in the web.config and has a ScriptManager on the page?
Does placing it on the page and/or submitting a partial postback with it present cause any JavaScript errors?
Okay, it bothers me when I give up on something, so I decided to work this out. I think the copy/paste sample code wasn’t working on my .aspx because I had an unrelated postback that had an error in it. Once I fixed that, the sample update panel and button worked, but my login button still does not. I use code like this to handle asynchronous login (http://disturbedbuddha.wordpress.com/2007/11/19/a-client-side-ajax-login-for-aspnet/). I tested with the manual javascript simpler version where I believe your postback ritalin started from in your early blog posts (http://encosia.com/2007/01/16/css-style-as-ajax-progress-indicator/) and I debugged to find that $get(sender._postBackSettings.sourceElement.id) was the id of the update panel and not the button. I think this is because the button does not directly cause the postback and the postback must happen after the login is completed as seen on the disturbedbuddha link. It seems like a bad idea to postback twice, so I don’t see any way to tie this button click into PostBackRitalin. I can manually disable and enable the sign in button since I already have start/end functions but it would be nice to tie it into the rest of the postback callers. Maybe you could add a property to manually add Ids which are to be disabled by PostBackRitalin. I haven’t thought that through much, I’m sure you’ll have a better picture. Maybe a future version which you mentioned somewhere should support multiple button Ids in the same updatePanel being disabled will automatically support this.
You’re on the right track there.
The reason that my control isn’t working for that button is because it doesn’t generate a partial postback at all. That authentication example makes a web service call to log the user in, not a partial postback.
As an aside, I would advise against following that example too closely. Hiding secure content from anonymous users with client side functionality is a good way to end up on The Daily WTF.
Well I do have a partial postback to load the logged in interface; it just isn’t done until after the login call completes. I don’t follow what you mean about hiding secure content from anonymous users with client side functionality. Its just a web application that never does a full postback currently (except when logging out). From the user’s perspective it looks exactly the same as any other website with login functionality; it just stays at the same web address and never redraws the screen from scratch because it is important for a seamless visual experience on my site to never have a full postback.
I suppose my question then would be: why use two requests? If you’re going to load an interface with a partial postback anyway, wouldn’t it make more sense to authenticate the user in that same request?
Re: security, if you look at that example you linked, he’s just hiding the secure content using CSS. A “view source” is all it would take for someone to access his “secure” content. It sounds like you (thankfully) aren’t using that part of his example, so you can disregard that problem.
Hi, I see you have skillfully avoided the answer before, but here it is again: Any chance of getting hold of the source code?
Not generally, but get in touch with me privately with the details of what you need it for and we might be able to work something out.
Dave
I’m using asp.net 2.0, along with the AJAX extensions. I downloaded PostBackRitalin (both the dll and pdb files ) and put them in the /bin directory of my project. I added the “using Encosia” to my code-behind cs file, and added the register assembly reference to my aspx file. I can see the classes in the code behind, however I cannot seem to make reference to encosia in the aspx file. When I try and run the file I get the error: Unknown server tag ‘encosia:PostBackRitalin’. Could you provide some instruction as to how I can integrate this with my project ?
Cheers
Eric
You shouldn’t need the “using” in code-behind. Make sure your registration on the ASPX page is like this:
If your project is a web application project, you’ll need to add a reference to the DLL as well. Just placing it in the /bin directory doesn’t take care of that automatically unless it’s a website project.
Thanks for the control.
Is there anything special you have to do for it to work with LinkButtons?
It seems to work fine for normal buttons, but it’s not working for me on LinkButtons.
Nice control, btw-
Thanks-
After some digging with Reflector I noticed for LinkButtons in the _beginRequest method that you aren’t disabling the element or changing the text or anything except removing the href.
Is that intentional? I realize you are achieving the desired goal – but there’s no visual feedback that the link isn’t clickable.
Couldn’t we at least just disable the element? Or maybe even change the text?
Thanks-
Unfortunately, there’s no way to “disable” an <a> element in the browser. That’s the reason for the kludgey href shell game.
Next version, I’ll probably add an option to manipulate the link’s CSS during the postback.
Dave,
This control is fantastic. Question: I have a basic page with nothing but one update panel, two buttons in the panel and your control. Only the button that initiated the postback is disabled. I saw in a previous comment that you were going to add multiple buttons. Have you done this and I am just not configuring your control correctly? Thanks again for supplying a simple (from my end anyway) solution to a problem everybody has.
Chris
Hi, Chris.
I’ve actually been working on that functionality this week. I’ll email you a release candidate as soon as it’s available, if you’d like to get early access to it and help me test it.
Hi,Dave
The control works excellent. It solves us double click issue in Ajax. But, we have multi buttons and links on one page. It only disabled the button we clicked. Any possible to put a div cover on top of page to avoid user to click other buttons , links ,etc when they wait?
Cheers
Helen
In the next version (almost finished; at RC now), it will allow you to disable all Buttons, LinkButtons, and ImageButtons in the UpdatePanel that triggered an update, instead of just the control that raised the postback.
For a more comprehensive, full-screen effect like you’re describing, check out this post about using BlockUI to implement that: http://encosia.com/2008/10/04/using-jquery-to-enhance-aspnet-ajax-progress-indication/
when are u planning to release this version… as stated below
Dave Ward 9:42 am – January 19, 2009In the next version (almost finished; at RC now), it will allow you to disable all Buttons, LinkButtons, and ImageButtons in the UpdatePanel that triggered an update, instead of just the control that raised the postback.
There’s an issue of ClientIDs when it’s used on a Master Page, which is why I haven’t released it yet.
If that isn’t a concern for your application, you can get the 1.0 RC here: http://encosia.com/controls/postbackritalin/postback-ritalin-1.0-rc1.zip
Hi,
I have been reading your blog for a long time.. I tried, for the first time to download.. But I couldnt find the source code.. only the dll is included in the downloads..
did i miss something?
please let me know
thanks
olga lednichenko
——————————
the one that got scammed
The assembly in the download file has not been signed with strong key,can I disassemble it and recompile it with a strong key and use it?
Definitely, feel free. I’d just ask that you don’t redistribute it.
Cool,thanks.
Is this free for commercial use ?
Yes.
Great! Thanks.
Hi,
First of all thanks for you work.
In my web app, I use the TabContainer from the Ajax Control Toolkit. The TabContainer is inside an UpdatePanel because I also have a ASP.NET Wizard to switch TabPanel. The user also has the possibility to witch TapPanel by clicking on the TabPanel Header.
I wonder if it is possible to use PostBack Ritalin to prevent users from clicking too fast between the TapPanel Headers, which makes crash the TabContainer with this error:
Error: [Exception... "'Sys.ArgumentOutOfRangeException: Sys.ArgumentOutOfRangeException: Specified argument was out of the range of valid values.
Parameter name: value' when calling method: [nsIDOMEventListener::handleEvent]” nsresult: “0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)” location: “” data: no]
I added your control in my code but it only have an effect on the Wizard Next/Previous button.
Thank you.
By the way, the AutoPostBack property of my TabContainer is set to True so I can manage Wizard current step when the user switches TabPanel by clicking on the TabPanel header.
Just the job…. cracking control !
thanks
This is nice. Can I post an online article on this?
Sure.
Anyone ever get the error pbr_oldtext is undefined when using this control? This occassionally happens and causes partial postbacks to change to full postbacks.
Updating to v0.10 or v1.0 should fix that, I believe.
Hi Dave.
This control just saved my day.
Thanks for sharing it, it’s a really good job.
Thank you so much for this. I have had Firefox customers getting double charged for some time now because the script to disable the button caused two postbacks. Now I won’t get double orders from anyone and we are all happy!
hi Dave,
thanks for nice extender.
but i am not able to use it.
i am using master page & my update panel updates on click of checkbox.
Please can you suggest where am i wrong?
That should be okay if you use the DisableAllElements feature added in v1.0. If your checkbox that triggers the UpdatePanel is in UpdatePanel1, something like this:
Thanks a ton… this was making me insane having 2 buttons and an image to manipulate in javascript
Any chance of maybe checking checkboxes with this great control?
That would realy help me a lot
It could be expanded to affect checkboxes without too much trouble.
Would you need it to change the checkboxes’ labels at all, or just make them unclickable during the postback?
Just making them unclickable would be more than enough, dont need their tect to change.
Hi Dave,
Your work is great.
I would like to set 4 buttons in same UpdatePanel to be disabled when users click 1 of them. I set the DisableAllElement to be True. But only clicked button is disabled.
Please help me.
I am having problems getting this to work. I get a compiler error: ‘Button_OnClick’ is not a member of ‘ASP.default_aspx’.
Is there any chance you could provide a download of a sample project with a single button in it?