AJAX UpdateProgress does not show

Question

I have an update panel that includes a gridview with two buttons and a modal popup. When the user clicks btnView, the modal popup appears displaying the relevant information.

My issue is that I have been trying to get the updateprogress to appear during the partial postback and so far have not managed it. I should mention that the same UpdateProgress code does work in a test page that just comprises of a button with a sleep function in the code behind. Here is the html:

<!-- Placing the GridView in UpdatePanel-->
  <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="gv" />
        </Triggers>
        <ContentTemplate>
            <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="GroupID" GridLines="Both"
                 BorderWidth="1px" CellPadding="2" ForeColor="Black" OnRowDataBound="gv_RowDataBound" BorderStyle="Double" HorizontalAlign="Center" 
                HeaderStyle-HorizontalAlign="Center" AllowSorting="True" CssClass="gvformat">
                <AlternatingRowStyle BackColor="#95B9B9" /> 
                <HeaderStyle BorderStyle="Double"  BorderColor="Black"/>
                <Columns>

                 <asp:BoundField DataField="FinancialYear" HeaderText="Financial Year"  ItemStyle-HorizontalAlign="Center"/>
                 <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Button ID="btnView" runat="server" Text="view" OnClick="btnComments_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-info" Font-Bold="True" />&nbsp;
                    </ItemTemplate>
                    <HeaderTemplate>Comment</HeaderTemplate> 
                 </asp:TemplateField>
                 <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
                    <ItemTemplate>
                        <asp:Button ID="btnDetail" runat="server" Text="view" OnClick="btnDetails_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True" />
                    </ItemTemplate>
                    <HeaderTemplate>Details</HeaderTemplate> 
                 </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:Button ID="bttnHidden" runat="Server" Style="display: none" />
            <br />

            <asp:Panel ID="pnlComment" runat="server" Width="650px" Height="620px"  Style="display: none;" CssClass="modalBox">
                <table border="1" class="commentTable" style="border-collapse: separate; border-spacing: 10px; width:100%; height:100%">
                    <tr><th><asp:Label ID="lblComments" runat="server" Text="Comments" Font-Size="Medium"></asp:Label></th></tr>
                    <tr><td>
                        <asp:TextBox ID="txtExistingComments" runat="server" TextMode="MultiLine" ReadOnly="True" CssClass="content" Rows="12" Font-Names="Trebuchet MS"></asp:TextBox>
                    </td></tr>
                    <tr><th><asp:Label ID="lblNewComment" runat="server" Text="Add Comment" Font-Size="Medium"></asp:Label></th></tr>
                    <tr><td>
                        <asp:TextBox ID="txtNewComments" runat="server" TextMode="MultiLine" ReadOnly="False" CssClass="content" Rows="12" Font-Names="Trebuchet MS"></asp:TextBox></td></tr>
                    <tr><td>
                            <asp:Button ID="btnSave" runat="server" width="100px" Text="Save" OnClick="btnSave_Click" CssClass="btn btn-comment" ValidationGroup="SaveComment" ForeColor="White" Font-Bold="True" />&nbsp;&nbsp;
                            <asp:Button ID="btnCancel" runat="server" width="100px" Text="Cancel" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True"/></td></tr>
                    <tr>
                        <td>
                            <asp:RequiredFieldValidator ID="rfValidator" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="txtNewComments" 
                                ForeColor="Black" ValidationGroup="SaveComment" Font-Bold="True">You must enter a comment!</asp:RequiredFieldValidator>
                        </td>
                    </tr>
               </table>
            </asp:Panel>

            <cc1:ModalPopupExtender ID="modal" runat="server" TargetControlID="bttnHidden" PopupControlID="pnlComment" CancelControlID="btnCancel" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>
            <br />
            <asp:HiddenField ID="Hidden" runat="server" value="-1"/>
            <asp:HiddenField ID="bStatus" runat="server" />

        </ContentTemplate>
    </asp:UpdatePanel>

   <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" ChildrenAsTriggers="false" UpdateMode="Conditional" DisplayAfter="10">
        <ProgressTemplate>
                <div class="center">
                    <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/Images/loader.gif" AlternateText="Please wait ..." ToolTip="Please wait ..." />
                </div>
        </ProgressTemplate>
    </asp:UpdateProgress>   

</asp:Content>

Any help would be most appreciated!

Answer 1

two points you need to check.

First if you have any javascript errors - this Update Progress is base on javascrip, so any javascript error can stop the function of it. Open the console panel and check for javascript errors...

The second point is to check the DisplayAfter property on UpdateProgress , that is 500 milliseconds default value. If anything happens within this time, the UpdateProgress is not show. So add a lower value on DisplayAfter to check it out.