Disabling buttons/lists/etc when executing ASP.NET AJAX request

Just drop it in your page before the </body> tag:

    <script language="javascript" type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);

        var oldClass = "";
       
        function InitializeRequest(sender, args) {
            var postBackElement = $get(args._postBackElement.id);
            if (postBackElement != null) {
                postBackElement.disabled = true;
                oldClass = postBackElement.className;
                postBackElement.className = postBackElement.className + " disabled";
            }
        }
       
        function EndRequest(sender, args) {
            var sourceElement = $get(sender._postBackSettings.sourceElement.id);
            if (sourceElement != null) {
                sourceElement.disabled = false;
                sourceElement.className = oldClass;
            }
            oldClass = "";
        }
    </script>

And add this to your CSS (you may differentiate this among various tags like img.disabled for imagebuttons or input.disabled for textboxes etc.):

.disabled
{
    FILTER: alpha(opacity=70);
    BACKGROUND-COLOR: gray;
    opacity: 0.7
}

Just be carefull if you change the class of the element in question (that originated the ajax postback) to register a client script block to set oldClass to the new value as well, otherways it would be overwritten.

Leave a Reply

Your email address will not be published. Required fields are marked *