Disable button in update panel on async postback

Question

I have multiple update panels with various asp buttons on a single page. I want to disable the buttons which caused the postback in update panel untill it completes.

Is there a way to avoid using a third party control for this? through JQuery or any other method ?

Answer 1

You can use the start and stop message of the update panel to disable your controls. For example

<script type="text/javascript"> 
var prm = Sys.WebForms.PageRequestManager.getInstance();    
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {
   document.getElementById("ButtonToDisable").disabled = true;
}

function EndRequest(sender, args) {
   document.getElementById("ButtonToDisable").disabled = false;
}
</script>

Answer 2

You can either do this:

cs

//in pageload
//the request is not in postback or async mode
bt1.OnClientClick = "this.disabled = true; " + ClientScript.GetPostBackEventReference(bt1, null) + ";");

Note: you can replace "this.disabled = true" with a js function that will have better handling for disabling the button and maybe display a friendly message as well.

---

Or this:

http://msdn.microsoft.com/en-us/library/bb383989.aspx

js

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
function CheckStatus(sender, arg)
{
   var postBackElement = arg.get_postBackElement();
   var prm = Sys.WebForms.PageRequestManager.getInstance();
   if (prm.get_isInAsyncPostBack() && postBackElement.id == "btn1") {
      arg.set_cancel(true);
      //display friendly message, etc
   }
}

Note: I modified it so it checks for the button's id. Replace "btn1"

Good luck!!