PostBack Ritalin

by: Dave Ward

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

WaitText (optional): 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…”.

WaitImage (optional): 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.

PreloadWaitImages (optional): Boolean value which controls preloading of WaitImages. Defaults to true.

MonitoredUpdatePanels (optional): 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

UpdatePanelID: The control ID of the UpdatePanel to monitor.

WaitText (optional): Same functionality as the master WaitText, but specific to the particular UpdatePanel specified by UpdatePanelID.

WaitImage (optional): Same functionality as the master WaitImage, 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

Download PostBack Ritalin

Changelog

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

Trackbacks

Comments

Comment by Anonymous
5:04 pm - July 7, 2007

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!!

 
Comment by Zack Owens Subscribed to comments via email
1:06 pm - July 17, 2007

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.

Comment by Dave Ward
4:40 pm - July 17, 2007

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.

 
 
Comment by garo
10:01 am - September 7, 2007

Hi, it’s a great extender, but can you also support the linkButtons? I’d appreciate if I could also see the source code…

Comment by Dave Ward
1:14 pm - September 7, 2007

I believe adding LinkButton support would be pretty easy. I’ll put that on my list of things to do.

 
 
Comment by Chris W. Subscribed to comments via email
11:15 am - September 14, 2007

For those of us not using Visual Studio, what does the Assembly registration look like for your control?

Comment by Dave Ward
12:54 pm - September 14, 2007

Like so:

<%@ Register Assembly="PostbackRitalin" Namespace="Encosia" TagPrefix="cc1" %>
Comment by Chris W. Subscribed to comments via email
2:45 pm - September 14, 2007

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.

Comment by Dave Ward
3:27 pm - September 14, 2007

Yes, it only uses the image replacement if the control that raises a partial postback is an ImageButton control.

 
 
 
 
Comment by jrummell Subscribed to comments via email
10:11 pm - September 16, 2007

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.

Comment by Dave Ward
1:04 am - September 17, 2007

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.

Comment by jrummell Subscribed to comments via email
6:15 am - September 17, 2007

Awesome, thanks!

 
 
 
Comment by Dave Ward
12:11 am - January 13, 2008

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.

 
Comment by Chris Subscribed to comments via email
12:50 pm - January 28, 2008

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,

Comment by Dave Ward
1:01 pm - January 28, 2008

Try that again with <pre lang=”asp”></pre> around the code.

Comment by Chris Subscribed to comments via email
2:44 pm - January 28, 2008

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:

 
 
 
Comment by Dave Ward
8:05 pm - January 30, 2008

Updated to version 0.9. The new version adds a couple new features and a couple bugfixes, thanks to Chris’ feedback. Thanks, Chris!

 
Comment by Mattias Subscribed to comments via email
7:50 pm - February 6, 2008

Support for LinkButtons would be great.

Comment by Dave Ward
12:04 am - February 7, 2008

That shouldn’t be difficult. I’ll add it in the next build.

 
 
Comment by Robert Subscribed to comments via email
10:20 am - February 12, 2008

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

Comment by Dave Ward
7:24 pm - July 2, 2008

Thanks for the bug report, Robert. Those problems should both be fixed in v0.10

 
 
Comment by Roger
11:37 am - February 18, 2008

Excellent, works great right out of the box Thanks!

 
Comment by Mojtaba Vali Subscribed to comments via email
11:57 pm - March 1, 2008

Hi the ajax control toolkit is updated.
thanks for attention.

Comment by Dave Ward
12:06 am - March 2, 2008

This isn’t dependent on the Toolkit anymore. The current download should work with any Toolkit version.

 
 
Comment by Cory Isakson Subscribed to comments via email
12:06 pm - March 5, 2008

Dave, any plans to release the source or add support for LinkButton. We use as many link buttons as regular ones. Thanks!

Comment by Dave Ward
12:13 pm - March 5, 2008

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.

 
 
Comment by Brian Minisi Subscribed to comments via email
4:39 pm - March 14, 2008

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!

Comment by Dave Ward
4:42 pm - March 14, 2008

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.

 
Comment by Dave Ward
10:12 pm - March 17, 2008

I haven’t been able to reproduce this. Could you email me a representative site/project?

 
Comment by Luda Subscribed to comments via email
1:59 pm - April 1, 2008

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.

Comment by Dave Ward
2:13 pm - April 1, 2008

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.

 
 
 
Comment by Nick Bork Subscribed to comments via email
2:08 pm - March 19, 2008

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?

Comment by Dave Ward
11:32 pm - March 19, 2008

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.

 
 
Comment by Joe
8:20 pm - March 30, 2008

Nice work so far.

I have a problem with the new CSS cursor changes in 0.9. On a button click, if the code being called in the button click event handler and an exception is thrown I would like the user to be able to click the button again (i.e. it returns to its original state). At the moment the text reverts and button becomes enabled, but the cursor does not change back to an arrow and remains an hourglass.

Long story short, is it possible to remove this change
Added CSS to change cursor style to “wait” when hovering over the disabled control.
or at least provide a way to disable it?

When is the next version to be released?

Comment by Dave Ward
11:13 am - April 1, 2008

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.

 
 
Comment by Joe
1:38 am - April 28, 2008

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.

Comment by Dave Ward
7:38 pm - April 28, 2008

Can you email me a representative sample? I’ll check it out.

 
 
Comment by Radoslav
11:08 am - June 9, 2008

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

Comment by Dave Ward
4:12 pm - June 9, 2008

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:

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
    PostBackRitalin1.WaitText = "Please wait...";
}
 
 
Comment by Anonymous
12:38 pm - June 20, 2008

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

Comment by Dave Ward
1:12 pm - June 20, 2008

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.

Comment by Richard Subscribed to comments via email
2:04 pm - June 20, 2008

Thanks for your fast reply. Unfortunately, the lastest Beta generates an error from the following inserted script in the page.

var pbr = new PostBackRitalin('Processing...', null, ['FilterUpdatePanel'], {'FilterUpdatePanel' : 'Applying...'}, }, true);

Probably something I doing wrong, but my work-around (see following post) gets me through for the time being.

Thanks,
Richard

Comment by Dave Ward
2:20 pm - June 20, 2008

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.

 
 
 
Comment by Richard Subscribed to comments via email
1:41 pm - June 20, 2008

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.

protected void SurveyTable_RowCreated(object sender, GridViewRowEventArgs eventArgs)
{
    GridViewRow row = eventArgs.Row;
    if (row.RowType == DataControlRowType.Pager)
    {
        // The pager row is rendered as a table with a  single row and cells for each of the images. 
        // The rather weird specification of the controls ControlCollection is to just get down to
        // the list of <TD> in the table.
        ControlCollection controls = row.Controls[0].Controls[0].Controls[0].Controls;
        foreach (Control control in controls)
        {
            ImageButton image = control.Controls[0] as ImageButton;
            image.ID = image.AlternateText; 
        }
    }
}
 
 
Name
Email (never shown publicly)
Website

Basic HTML is allowed (e.g. <a>, <blockquote>, <strong>, <em>, etc).

To post formatted code blocks, use <pre lang="x">code</pre>, where x is asp, csharp, html, javascript, or xml.

Your Comment (smaller size | larger size)