Disable an ASP.NET Button Control During Postback with an AJAX Loading Background Image
 
Published: 23 Nov 2009
Unedited - Community Contributed
Abstract
There are times when our applications might take an extra few seconds to respond to a click event. Some users might get impatient and click on the button more than once. We can easily avoid this type of situation by disabling the submit button during postback on the page by using a client-side script.
by Bryian Tan
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 52834/ 143

Introduction

There are times when our applications might take an extra few seconds to respond to a click event. Some users might get impatient and click on the button more than once. We can easily avoid this type of situation by disabling the submit button during PostBack on the page by using a client-side script. In this article, I will share with everyone on how to:

1.    Disable a button during PostBack with or without the present of a validation control.

2.    Change button text value during PostBack.

3.    Include an AJAX loading background image during PostBack.

4.    How to avoid the 'Page_IsValid is undefined' or ' Page_Validators is not defined' JavaScript error.

Using the Code

Before we begin, allow me to show you the structure of my project. You are welcome to download this demo.

Figure 1

 

Demo 1 – Without Validation Control

Here is the content of Jscript.js:

Listing 1

function disableBtn(btnID, newText) {
 
    var btn = document.getElementById(btnID);
        setTimeout("setImage('"+btnID+"')", 10);
        btn.disabled = true;
        btn.value = newText;
}
//using absolute url for image to avoid complication
function setImage(btnID) {
    var btn = document.getElementById(btnID);
    btn.style.background = 'url(http://images.ysatech.com/ajax-loader.gif)';
}

Here is part of the Default.aspx page content:

Listing 2

<table>        
         <tr>
            <td>
            <td>
                 <asp:button id="btnOne" tabIndex="0" 
                    Runat="server" Text="Submit"
                    onclick="btnOne_Click" 
                    OnClientClick="disableBtn(this.id, 'Submitting...')" 
                    UseSubmitBehavior="false" />               
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Label ID="Label3" 
                  runat="server" Text=""></td>
        </tr>
   </table>
 
<script type="text/javascript" src="JScript.js"></script>

For testing purposes, I included these lines in default.aspx.cs:

Listing 3

<span lang=CS>protectd void btnOne_Click(object sender, EventArgs e)</span>
<span lang=CS>{</span>
<span lang=CS>    Thread.Sleep(2000);</span>
<span lang=CS>    Label3.Text = DateTime.Now.ToLongTimeString();</span>
<span lang=CS>}</span>

In the Default.aspx page, I have a Button and a Label control. Let's take a closer look at the button attributes.

·         OnClientClick="disableBtn(this.id, 'Submitting...')" - Calls the JavaScript function by passing in the button ID and the new text value that I want it to display on click event. The JavaScript will gray out the button, set new text ('processing…') and display Ajax loading background image.

·         UseSubmitBehavior="false" - Indicates that the button control should use the ASP.NET postback mechanism instead of the client browser's submit mechanism (UseSubmitBehavior property).

Here is how the button will look like when someone clicks on it:

Figure 2

 

Figure 3

Demo 2 – With Validation Control

Here is the output from Default2.aspx:

Figure 4

Oops... The button is still disabled after it failed the validation process. Let's modify the JavaScript to fix this problem.

Figure 5

Here is the content of the new JavaScript file with comments – JScript2.js:

Listing 4

function disableBtn(btnID, newText) {
    var btn = document.getElementById(btnID);
    var oldValue = btn.value;
    btn.disabled = true;
    btn.value = newText;
    if (HasPageValidators()) {
        if (Page_Validators != undefined && Page_Validators != null) {
            //Looping through the whole validation collection.
            for (var i = 0; i < Page_Validators.length; i++) {
                ValidatorEnable(Page_Validators[i]);
                //if condition to check whether the validation was successfull or not.
                if (!Page_Validators[i].isvalid) {ResetToDefault(btn, oldValue); break;   }
                else {
                    var isValidationOk = Page_IsValid; EnableOnUnload(btn, btn.value);
 
                    if (isValidationOk !== null) {
                        //page valid
                        if (isValidationOk) {
                            SetImage(btn);
                            break;
                        }
                        else { //page not valid
                            btn.disabled = false;
                        }
                    }
                }
            }
        }
    }
    else {
        SetImage(btn);
        btn.disabled = true; btn.value = newText;
        EnableOnUnload(btn, btn.value);
    }
}
function ResetToDefault(btn, oldValue) {
    btn.disabled = false;
    btn.value = oldValue;
}
 
//Handle Page_Validators is not defined error
function HasPageValidators() {
    var hasValidators = false;
    try {
        if (Page_Validators.length > 0) {
            hasValidators = true;
        }
    }
    catch (error){}
    return hasValidators;
}
 
function SetImage(btn) {
    btn.style.background = 'url(http://images.ysatech.com/ajax-loader.gif)';
}
 
//enable the button and restore the original text value for browsers other than IE
function EnableOnUnload(btn, btnText) {
    if (navigator.appName !== 'Microsoft Internet Explorer') {
        window.onunload = function() {
            ResetToDefault(btn, btnText);
        }
    }
}

In the JavaScript function disableBtn, first I check if the page contains any validation controls else set the background image, text, disable the button and call the function EnableOnUnload. I found out that, in Firefox, if we hit the button and continue to the next page, and then hit the Back button (or javascript:history(-1);)... the button control is still disabled. The purpose of the function EnableOnUnload is to enable the button and restore the original text value during the onunload event for browsers other than IE. If the page have validation controls and fail the validation process, do not disable the button else set the background image, text, disable the button and call the function EnableOnUnload.

Output from using the new JavaScript (JScript2.js), when fail validation process:

Figure 6

Figure 7

Figure 8

Conclusion

The main items in this project were the JavaScript (Jscript2) and the button attributes (OnClientClick, UseSubmitBehavior). I hope someone will find this tutorial useful. If you think I can improve this code, please leave me a feedback and share your thoughts.

Tested on IE 6.0/7.0 and Firefox 3.0.13.

 

History

·         08/14/2009 - I found out that, in Firefox, if we hit the button and continue to the next page, and then hit the Back button (or javascript:history(-1);)... the button control is still disabled. I have updated the JavaScript (JScript2). I have not fully tested the new implementation. Please leave me a feedback and share your thoughts.

·         10/19/2009 - Modified the JavaScript(JScript2) to fix the double validation problem.

 

References

Button..::.UseSubmitBehavior Property

Calling validator controls from Javascript

ASP Net - Page_Validators error

 

Demo

Downloads



User Comments

Title: nor   
Name: L;JL;KJ
Date: 2012-08-29 12:14:11 AM
Comment:
LKJ;LJ
Title: gdfg   
Name: dgdfgd
Date: 2012-04-29 4:19:49 AM
Comment:
fdgdfg
Title: Very nice tutorial   
Name: Janou M
Date: 2010-11-17 3:17:21 AM
Comment:
Thanks for some great code and a good, clear explanation on how to use it. This function works perfectly. If I can now just get a good GIF image that spans across my submit button .. hehehe .. it's quite long in width.
Title: Mr   
Name: Sanaj M Shaji
Date: 2010-07-01 4:21:11 PM
Comment:
Thanks a lot, you saved my 2 days work.
Title: Disable button while postback   
Name: Bryian Tan
Date: 2010-01-17 2:40:58 PM
Comment:
Jeff,

I haven't try that yet, I'll let you know once I get it to work.

Praveen ,
Nice. Initially, I was using one of the solution you mentioned in your blog. But I wanted it to work with/without the present of validation control, image button, compatible with Firefox, and display background image. And I have encapsulated all the solutions in one JavaScript.

Thanks,
Bryian Tan
Title: Disable button while postback   
Name: Praveen
Date: 2010-01-17 5:28:27 AM
Comment:
A simple solution for it is explained here. Which actually looks for the validation on server side and raise event when once the event raised. So, user can't do or send multiple request when one request is processing.
http://praveenbattula.blogspot.com/2010/01/disable-button-in-onclick-and-process.html
Title: Can we use it for delete button?   
Name: Jeff
Date: 2009-12-06 2:05:07 PM
Comment:
Hi, i have use it and it work for regular button.

but i would like to implement it into my delete buttons which required a a javascript confirm validation first. But i try something and there is no postback when i click 'yes'.

you guys have done it?
Title: A production tested alternative   
Name: sjb101
Date: 2009-11-25 4:01:10 AM
Comment:
I have used the following alternative on multiple production sites and it is an active part of my app templates now
http://encosia.com/downloads/postback-ritalin/
Title: Disable Button   
Name: Servesh
Date: 2009-11-24 11:48:03 PM
Comment:
It's working fine... and can be used for bulk upload






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2018 ASPAlliance.com  |  Page Processed at 2018-12-14 3:16:32 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search