locked
How to disable button using javascript while updating in update progress and updatePanel RRS feed

  • Question

  • User-1669115804 posted

    How to disable button using javascript while updating in update progress and updatePanel
    Monday, August 25, 2008 8:17 AM

Answers

  • User142102346 posted

     Hi there,

    please try to put the code snippet below the ScriptManager on your page.

     

    function ShowHideButtonOnProgress(){
          // Get a reference to the PageRequestManager.
          var prm = Sys.WebForms.PageRequestManager.getInstance();
         
          // Using that prm reference, hook _initializeRequest
          // and _endRequest, to run our code at the begin and end
          // of any async postbacks that occur.
          prm.add_initializeRequest(InitializeRequest);
          prm.add_endRequest(EndRequest);
         
          // Executed anytime an async postback occurs.
          function InitializeRequest(sender, args)
          {       
            // Get a reference to the element that raised the postback,
            //   and disables it.
            $get(args._postBackElement.id).disabled = true;
          }
          // Executed when the async postback completes.
          function EndRequest(sender, args)
          {   
            // Get a reference to the element that raised the postback
            //   which is completing, and enable it.
            $get(args._postBackElement.id).disabled = false;
          }
    }

     

    and do not forget to mark this if an answer 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 25, 2008 8:42 AM

All replies

  • User142102346 posted

     Hi there,

    please try to put the code snippet below the ScriptManager on your page.

     

    function ShowHideButtonOnProgress(){
          // Get a reference to the PageRequestManager.
          var prm = Sys.WebForms.PageRequestManager.getInstance();
         
          // Using that prm reference, hook _initializeRequest
          // and _endRequest, to run our code at the begin and end
          // of any async postbacks that occur.
          prm.add_initializeRequest(InitializeRequest);
          prm.add_endRequest(EndRequest);
         
          // Executed anytime an async postback occurs.
          function InitializeRequest(sender, args)
          {       
            // Get a reference to the element that raised the postback,
            //   and disables it.
            $get(args._postBackElement.id).disabled = true;
          }
          // Executed when the async postback completes.
          function EndRequest(sender, args)
          {   
            // Get a reference to the element that raised the postback
            //   which is completing, and enable it.
            $get(args._postBackElement.id).disabled = false;
          }
    }

     

    and do not forget to mark this if an answer 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 25, 2008 8:42 AM
  • User198967677 posted

     awesome! thanks a lot.

     Only thing though, to get this to work properly I had to remove the _- function ShowHideButtonOnProgress(){ -_  line from the top and the closing bracket at the bottom.

     Also, since I am using an UpdateProgress control on the same time, then I also commented out the  _- prm.add_endRequest(EndRequest); -_ line, as otherwise it would not remove the progress message.

    Tuesday, September 9, 2008 1:11 AM
  • User40241901 posted

    I ran into the same issue but I didn't want to remove the EndRequest function since I need it to enable the button again once the update has been completed. I wrote the following code that disables the button that triggered the update event but also enables it once the update has been completed.

            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(InitializeRequest);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
            var postBackElement;
            function InitializeRequest(sender, args) {
                $get(args._postBackElement.id).disabled = true;
                postBackElement = args.get_postBackElement();
            }
            function EndRequest(sender, args) {
                if (postBackElement.id == 'Button1') {
                    $get('UpdateProgress1').style.display = 'none';
                }
                $get(postBackElement.id).disabled = false;
            }
    Sunday, July 17, 2011 4:52 PM