Disable button on update progress in ASP.net Ajax

Question

Hi i am loading huge data by asp.net Ajax on button click in grid view showing loading message on update prgress ...in update progress time i have to disable my BtnLoadReport Button.

<td>
     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
</td>
<td>
   &nbsp;</td>
<td>
 &nbsp;</td>
</tr>
  <tr>
    <td>
     <asp:UpdateProgress ID="updProgress"
        AssociatedUpdatePanelID="UpdatePanel1"
        runat="server" oninit="updProgress_Init" onprerender="updProgress_PreRender">
            <ProgressTemplate>            
               <span style="color:green; font-style:italic;">Loading, please wait...</span>            
            </ProgressTemplate>
        </asp:UpdateProgress>
                        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                        <ContentTemplate>
                        <div id="DemoId">
                          <asp:Button ID="BtnLoadReport" runat="server" onclick="BtnLoadReport_Click" 
                Text="LoadReport" Width="176px"  ClientIDMode="Static" OnClientClick="return clickOnLoadReport();" />
                </div>
                           <asp:GridView ID="GridView1" runat="server" Height="170px" 
                    onselectedindexchanged="GridView1_SelectedIndexChanged" Width="438px">
                 </asp:GridView>
                        </ContentTemplate>
                        <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="BtnLoadReport" EventName="Click" />
                        </Triggers>
                        </asp:UpdatePanel>
                    </td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>

my script to disable button

          <script type="text/javascript">
            var updateProgress = null;
               function clickOnLoadReport() {
               //    This will disable all the children of the div
              var prm = Sys.WebForms.PageRequestManager.getInstance();
              if (prm.get_isInAsyncPostBack()==false) {
              var nodes = document.getElementById("DemoId").getElementsByTagName('*');
               for (var i = 0; i < nodes.length; i++) {

                nodes[i].disabled = true;
                // nodes[i].off("click");
               }
             }
            }
          </script>

but it is not disabling my button for long it is disabling it for just seconds

  protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.BtnLoadReport);
        }

        protected void BtnLoadReport_Click(object sender, EventArgs e)
        {
           // System.Threading.Thread.Sleep(3000);

                UpdatePanel1.Update();
                DataSet dataSet = new DataSet();
                dataSet.ReadXml(@"C\Data.Xml");
                GridView1.DataSource = dataSet.Tables[0];
                GridView1.DataBind();

        }

        protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        {

        }

        protected void updProgress_Init(object sender, EventArgs e)
        {
BtnLoadReport.Enable = false;        
                        }

        protected void updProgress_PreRender(object sender, EventArgs e)
        {
           BtnLoadReport.Enable
 = true;
        }

this above thing i tried to disable my button BtnLoadReport on Update progress still not working Thanks in Advance

Answer 1

function clickOnLoadReport() {
        var requestManager = Sys.WebForms.PageRequestManager.getInstance();
        requestManager.add_initializeRequest(CancelPostbackForSubsequentSubmitClicks);

        function CancelPostbackForSubsequentSubmitClicks(sender, args) {
            if (requestManager.get_isInAsyncPostBack() &
        args.get_postBackElement().id == 'BtnLoadReport') {
                args.set_cancel(true);
                document.getElementById("BtnLoadReport").setAttribute("disabled", "disabled");
                //alert('A previous request is still in progress that was issued on clicking ' + args.get_postBackElement().id);
            }
        }
    }

i made changes in my javascript function it solve my problem