Removing button while progress is displayed

Question

I have a button on an ASP.NET wep application form and when clicked goes off and posts information a third party web service.

I have an UpdateProgress associated with the button.

how do disable/hide the button while the progress is visible (i.e. the server has not completed the operation)

I am looking at doing this to stop users clicking again when the information is being sent (as this results in duplicate information being sent)

Answer 1

Easiest way it to put a semi-transparent png over the entire page -- then they can't send events to the page below. It looks kind of nice too, in my opinion.

You see that kind of thing in the modal dialog box implementations of various AJAX toolkits and in lightbox.

If you don't like the look, you just need to make it almost fully tranparent (an alpha value 1 off of fully transparent isn't noticeable).

Answer 2

You'll have to hook a javascript method to the page request manager (Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest). Here is the code I would use to hide the buttons, I would prefer the disable them (see how that's done in the link at the bottom).

ASP.NET

<div id="ButtonBar">
  <asp:Button id= ............
</div>

Javascript

<script language="javascript">
  // Get a reference to the PageRequestManager.
  var prm = Sys.WebForms.PageRequestManager.getInstance();

  // Using that prm reference, hook _initializeRequest
  // and _endRequest, to run our code at the begin and end
  // of any async postbacks that occur.
  prm.add_initializeRequest(InitializeRequest);
  prm.add_endRequest(EndRequest);

  // Executed anytime an async postback occurs.
  function InitializeRequest(sender, args) 
  {
    $get('ButtonBar').style.visibility = "hidden";
  }

  // Executed when the async postback completes.
  function EndRequest(sender, args) 
  {
    $get('ButtonBar').style.visibility = "visible";
  }
</script>

See more about this at Why my ASP.NET AJAX forms are never submitted twice by Dave Ward.

Answer 3

Hi Dean,

I also wrote a blog post about this which I hope is helpful to you: http://www.fitnessconnections.com/blog/post/2008/01/Disabling-a-submit-button-UpdatePanel-Update-method.aspx

Cheers :)