How to Show the progressbar to Adding PostBackTriggers and AsyncPostBackTriggers to UpdatePanel in asp.net?

Question

I have a page with a ToolkitScriptManager and three update panels each update panel have triggers based on controls , now my problem is fire any server side events show the progressbar like percentages Example, How to show like that in PostBackTriggers and AsyncPostBackTriggers controls , my code is

     <asp:UpdatePanel ID="up1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TxtZip" EventName="textchanged" />
    </Triggers>
    <ContentTemplate>
        <asp:TextBox ID="TxtZip" runat="server" AutoPostBack="true" ClientIDMode="Static"
            MaxLength="6" onkeypress="return isNumberKey(event)" CssClass="txtstyle" OnTextChanged="TxtZip_TextChanged"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:PostBackTrigger ControlID="IBtnSave" />
    </Triggers>
    <ContentTemplate>
        <span class="art-button-wrapper"><span class="l"></span><span class="r"></span>
            <asp:Button ID="IBtnSave" runat="server" Text="Submit/Save" CssClass="art-button"
                ClientIDMode="Static" OnClientClick="return postbackButtonClick()" OnClick="IBtnSave_Click" />
        </span>
    </ContentTemplate>
</asp:UpdatePanel>

my progress bar code

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
                        <ProgressTemplate>
                            <div id="Progressbar" class="Progressbar" align="center" valign="middle" runat="server">
                                <asp:Image ID="Image1" Width="75" Height="95" runat="server" ImageUrl="~/images/animation_processing.gif" />
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>

and java script code is

<script type="text/javascript">
        //update panel and postback trigger with fileupload control upadteprogressbar code
        var updateProgress = null;
        function postbackButtonClick() {
            updateProgress = $find("<%= UpdateProgress1.ClientID %>");
            window.setTimeout("updateProgress.set_visible(true)", updateProgress.get_displayAfter());
            return true;
        }
</script>

This code working only postbacktrigger reason is when button click before fire onclick event , that event to call java script function , but Async Postback trigger does not call that function, how to handle that code and display the progressbar with percentages process, give me any suggestion

Answer 1

Just add the bellow code in aspx content page it working fine

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <script type="text/javascript">

      Sys.Application.add_init(appl_init);

      function hideProgressBar() {

//          var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
//          updateProgress.style.visibility = "hidden";
          $("#MainContent_UpdateProgress1").hide()
      }

      function appl_init() { 

          var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
          pgRegMgr.add_beginRequest(postbackButtonClick);
          pgRegMgr.add_endRequest(hideProgressBar)
      }

</script>