UpdateProgress won't show when causing an UpdatePanel to refresh with javascript

Question

I have an UpdatePanel and inside the update panel I have a button. The updatepanel also has an updateprogress control tied to it in order to display a loading graphic when the updatepanel does a postback.

If I click the button in the update panel then the progress loader shows up just fine. However, if I select the button with jQuery and do .click() the loader doesn't show up. The panel does post back and load content correctly but the progress loader doesn't trigger.

Any ideas why this would be?

Shahdat Shahdat · Accepted Answer · 2012-01-26T12:35:09

I just have tried your scenario. It works fine here.

Here is the html

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:UpdateProgress runat="server" ID="UpdateProgress1">
                <ProgressTemplate>
                    <img src="Images/ajax-loader.gif" />
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <input id="btnTest" title="JQuery Click" onclick="ClickButton1()" type="button"  value="JQuery Click" />

    <script type="text/javascript">
        function ClickButton1() {     
      //  alert('#<%=Button1.ClientID %>');
        $('#<%=Button1.ClientID %>').click();
        }
    </script>

Here is the back end code to show loading image for 5 seconds

 protected void Button1_Click(object sender, EventArgs e)
 {
    Thread.Sleep(5000);
 }

UpdateProgress won't show when causing an UpdatePanel to refresh with javascript

2 Answers