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();


        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 = "";

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

    FILTER: alpha(opacity=70);
    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 *