Web Development: Disable, Validate, & Enable Buttons
I bounced into this problem during a Web UI development, of which I'd say it's quite a common issue. Whenever a button is clicked, ideally it would be good to disable it to avoid continuous clicking. Of course, it may not be the case in certain circumstances, i.e. loading of images, of which sometimes clicking the button again would surely making it load faster.
However, in the latest development that I involved in, I need to make sure that the button as to be disabled to avoid continuous clicking that would cause some Javascript error that would cause the whole website to stop working. I've no idea why this is happening, and my only explanation should be because the execution time is short & it's AJAX, therefore the continuous clicking would cause some process not able to be executed timely and causing this issue.
So after some research on the Internet, I found that in order to disable the button during a button click event that has a postback, the onclick event has to be added to the button from the back end. I put the code inside an overriden Render method of the page itself.
button.Attributes.Add("onclick", "disableFunctions();");
This however, will cause the button to disable, but will not trigger the postback to the server. Further digging from the web, the postback script has to be put together into the "onclick" attribute. In the .Net Framework for ASP.NET 2.0, the __PostBack can be included with a function call to Page.ClientScript.GetPostBackEventReference(), of which it would include the necessary client side script for the postback. So the code would look like this.
button.Attributes.Add("onclick", "disableFunctions();" + Page.ClientScript.GetPostBackEventReference('parameters'));
So right now, it will cause the button to be disabled, and would trigger the postback. This has one drawback, of which the button would be disabled despite the validation is false, and would trigger the postback too. So the next step is to make sure that the disabling and postback event triggering shall only be done should the validation is true. This can be done by including the .Net Framework Javascript method called "Page_ClientValidate()", of which it would return whether the page is valid or not. So, by including this, it would look like this.
button.Attributes.Add("onclick", "if(Page_ClientValidate()){disableFunction();" + Page.ClientScript.GetPostBackEventReference('parameters') + "}");
So right now, the disabling of the button and the postback event of a button shall only be fired when the validation is met. But it is not really done yet, because the other issue is, what if there are many validation group inside a page file? Sometimes Page_ClientValidate() function could return more, but not all the time. So in order to tackle this issue, Page_ClientValidate can accept input in a form of string, that represents the validation group. So, should the enabling & disabling of the buttons have to b done, it should look like this.
button.Attributes.Add("onclick","if(Page_ClientValidate('" + VakudationFlag + "')){disableFunction();" + Page.ClientScript.GetPostBackEventReference('parameters') + "}");
So that's it. As to how to enable the button back, the enable function/method can be registered as ClientScriptBlock or ClientServerCode at the end of the server button event.
However, in the latest development that I involved in, I need to make sure that the button as to be disabled to avoid continuous clicking that would cause some Javascript error that would cause the whole website to stop working. I've no idea why this is happening, and my only explanation should be because the execution time is short & it's AJAX, therefore the continuous clicking would cause some process not able to be executed timely and causing this issue.
So after some research on the Internet, I found that in order to disable the button during a button click event that has a postback, the onclick event has to be added to the button from the back end. I put the code inside an overriden Render method of the page itself.
button.Attributes.Add("onclick", "disableFunctions();");
This however, will cause the button to disable, but will not trigger the postback to the server. Further digging from the web, the postback script has to be put together into the "onclick" attribute. In the .Net Framework for ASP.NET 2.0, the __PostBack can be included with a function call to Page.ClientScript.GetPostBackEventReference(), of which it would include the necessary client side script for the postback. So the code would look like this.
button.Attributes.Add("onclick", "disableFunctions();" + Page.ClientScript.GetPostBackEventReference('parameters'));
So right now, it will cause the button to be disabled, and would trigger the postback. This has one drawback, of which the button would be disabled despite the validation is false, and would trigger the postback too. So the next step is to make sure that the disabling and postback event triggering shall only be done should the validation is true. This can be done by including the .Net Framework Javascript method called "Page_ClientValidate()", of which it would return whether the page is valid or not. So, by including this, it would look like this.
button.Attributes.Add("onclick", "if(Page_ClientValidate()){disableFunction();" + Page.ClientScript.GetPostBackEventReference('parameters') + "}");
So right now, the disabling of the button and the postback event of a button shall only be fired when the validation is met. But it is not really done yet, because the other issue is, what if there are many validation group inside a page file? Sometimes Page_ClientValidate() function could return more, but not all the time. So in order to tackle this issue, Page_ClientValidate can accept input in a form of string, that represents the validation group. So, should the enabling & disabling of the buttons have to b done, it should look like this.
button.Attributes.Add("onclick","if(Page_ClientValidate('" + VakudationFlag + "')){disableFunction();" + Page.ClientScript.GetPostBackEventReference('parameters') + "}");
So that's it. As to how to enable the button back, the enable function/method can be registered as ClientScriptBlock or ClientServerCode at the end of the server button event.
Comments