Disable an ASP.NET button during PostBack with AJAX loading background image

Bryian Tan
15y
39.8k
0
0

Article

View this project in action

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:

Disable the button during PostBack with or without the present of validation control
Change the button text value during PostBack
Include an AJAX loading background image during PostBack
How I avoided the 'Page_IsValid is undefined' 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.

Project Structure

Demo 1 - Without Validation Control

Here is the content of the Jscript.js

function disableBtn(btnID, newText) {
    var btn = document.getElementById(btnID);
        setTimeout("setImage('"+btnID+"')", 10);
        btn.disabled = true;
        btn.value = newText;
}

function setImage(btnID) {

var btn = document.getElementById(btnID);

btn.style.background = 'url(12501270608.gif)';

}

Here is part of the Default.aspx page content.

<table>

<tr>

<td>

<asp:button id="btnOne" tabIndex="0" Runat="server" Text="Submit"

onclick="btnOne_Click"

OnClientClick="disableBtn(this.id, 'Submitting...')"

UseSubmitBehavior="false" />

</td>

</tr>

<tr>

<asp:Label ID="Label3" runat="server" Text=""></asp:Label></td>

</tr>

</table>

10/12/2009 - I have updated the JavaScript(JScript2) to prevent double validation. <br /> <br />

11/14/2009 - Fix bug mentioned by CodeProject user, prodriguez13. The JavaScript will throw
    an error when the control to validate is not visible. To remedy this, on onload event, I have added DisableValidators function. This function is responsible to disable all the validators with controltovalidate === null.
*   I received a few requests on getting this script to work with Image button. I managed to put together a solution for it. Let me know if you find any bugs.
*   Tested on IE 7.0/8.0, FireFox, image would not show on Google Chrome, maybe someone can shed some light on this.

function ResetToDefault(btn, oldValue) {
    btn.disabled = false;
    btn.value = oldValue;
}
//browser properties
var Browser = {
    Version: function() {
        var version = 999;
        if (navigator.appVersion.indexOf("MSIE") != -1) {
            version = parseFloat(navigator.appVersion.split("MSIE")[1]); return version;
        }
    },
    Name: navigator.appName,
    isIE: function() {
        if (navigator.appVersion.indexOf("MSIE") != -1) {
            return true;
        }
        return false;
    }
};

//Handle Page_Validators is not defined error
//http://www.velocityreviews.com/forums/t88987-pagevalidators-error.html
function HasPageValidators() {
    var hasValidators = false;
    try {
        if (Page_Validators.length > 0) {
            hasValidators = true;
        }
    }
    catch (error) { }

    return hasValidators;
}


function SetImage(btn) {

    if (btn.type == "image") {
        btn.src = null;
        btn.style.width = '100px';
        btn.style.height = '20px';
        btn.style.backgroundImage = 'url(http://images.ysatech.com/ajax-loader.gif)';
    }
    else {
        //somehow backgroundImage not working with IE 7
        if (Browser.isIE() && Browser.Version() === 7) {
            btn.style.background = 'url(http://images.ysatech.com/ajax-loader.gif)';
        }
        else {
            btn.style.backgroundImage = '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 (!Browser.isIE()) {
        window.onunload = function() {
            ResetToDefault(btn, btnText);
        };
    }
}

//check if the validator have any control to validate
function EnableValidator(validator) {
    var controlToValidate = document.getElementById(validator.controltovalidate);

    if (controlToValidate !== null) {
        // alert(controlToValidate.id);
        ValidatorEnable(validator);
        return true;
    }
    ValidatorEnable(validator, false);

    return false;
}

function disableBtn(btnID, newText) {
    var btn = document.getElementById(btnID);
    var oldValue = btn.value;
    btn.disabled = true;
    btn.value = newText;
    
    //if validator control present
    if (HasPageValidators()) {

        Page_IsValid = null;

        //http://sandblogaspnet.blogspot.com/2009/04/calling-validator-controls-from.html
        //double check, if validator not null
        if (Page_Validators !== 'undefined' && Page_Validators !== null) {
            //Looping through the whole validation collection.
            for (var i = 0; i < Page_Validators.length; i++) {

                var validator = Page_Validators[i];

                //check if control to validate is enable 
                if (EnableValidator(validator)) {

                    if (!Page_Validators[i].isvalid) { //if not valid
                        ResetToDefault(btn, oldValue); //break;
                    }
                }
            }

            //   else { //if valid
            var isValidationOk = Page_IsValid;

            alert('isValidationOk ' + isValidationOk);

            EnableOnUnload(btn, btn.value);
            if (isValidationOk !== null) {
                if (isValidationOk) {
                    SetImage(btn);
                    __doPostBack(btnID, '');
                    // break;
                }
                else { //page not valid
                    btn.disabled = false;
                }
            }
            //  }
            
        }
    }
    else { //regular, no validation control present
        // setTimeout("SetImage('" + btn + "')", 5);
        SetImage(btn);
        btn.disabled = true; btn.value = newText;
        EnableOnUnload(btn, btn.value);
    }
}

//disable those validators where controltovalidate = null
function DisableValidators() {
    //this will get rid of the Page_Validators is undefined error
    if (typeof (Page_Validators) === 'undefined')
        return;
        
    if (Page_Validators !== 'undefined' && Page_Validators !== null) {
        for (var i = 0; i < Page_Validators.length; i++) {
            var validator2 = Page_Validators[i];
            var controlToValidate2 = document.getElementById(validator2.controltovalidate);
            if (controlToValidate2 === null) {
                ValidatorEnable(validator2, false);
            }
        }
    }
    return false;
}

window.onload = DisableValidators;

Output from using the new JavaScript (JScript2.js)

Demo 2 OnClick fail Validation

Demo 2 OnClick Pass Validation

Demo 2 After PostBack

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 still can improve this code, please leave me a feedback and share your thought.

Tested on IE 6.0/7.0 and Firefox 3.0.13.

Up Next

Ebook Download

View all

Node Js and Angular CheatSheet

Read by 26 people

Download Now!

Learn

View all