UpdateProgress not appearing on second click of same button

Question

UpdateProgress appear first time, when i click on the button btnSubmit. But when i click the same button next time UpdateProgress not appearing. But all other things works well. I am using this UpdateProgress to show a GIF image while sending E-mail to client. For the first client UpdateProgress appear but for second to other 'n' UpdateProgress not appearing. Please help i am asking this question Second time in Stack Overflow

Code below shows my UpdateProgress

 <asp:UpdatePanel ID="up1" runat="server">
        <ContentTemplate>
            <asp:UpdateProgress ID="updProgress"
                runat="server">
                <ProgressTemplate>
                    <div class="modal">
                        <div class="center">
                            <span style="padding-left: 10px"><b>Please Wait..</b></span>
                            <img alt="" src="../images/Preloader_3.gif" width="50" height="50" />
                        </div>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>

Code below shows my button that trigger the UpdateProgress

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
    </Triggers>
    <ContentTemplate>
    <div class="form-group row">
        <div class="col-sm-6">
            <div class="col-sm-6">
                <asp:Button ID="btnSubmit" OnClick="btnSubmit_Click"
                    OnClientClick="javascript:return btnSubmit();" CssClass="btn btn-primary"
                    runat="server" Text="Submit" />
                <a href="assignment.aspx?sid=<%=Request.QueryString["sid"] %>" class="btn btn-default">Cancel</a>
            </div>
        </div>
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>

Code Behind CS

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
        updProgress.Visible = true;
        SendEmail(Convert.ToInt32(drpDiv.Text));
        updProgress.Visible = false;
    }

Answer 1

You have to place your update progress outside the update panel and associate with update progress. You can create another update panel to trigger your button with auto post back true.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" 
                    AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <!-- Place your Message here -->
</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" runat="server" 
                    AutoPostBack="true" />
    </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
    <!-- You can put some controls here -->
</ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Or, second method is:

<asp:UpdateProgress ID="UpdateProgress1" runat="server" 
                    AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <!-- Place your Message here -->
    </ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" runat="server" 
                    AutoPostBack="true" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>