How to trigger UpdateProgress on initial pageload in asp.net

StackOverflow https://stackoverflow.com/questions/22098359

Question

Question: Why does my UpdateProgress not show during the initial page load but does for subsequent postbacks via button click?

The only way I have managed to get this working is with a timer, which I'm not keen on. Is there another way?

Can someone explain why doSearch() causes the updateprogress to work from a button click but not on pageload via docoment ready?

Code:

Js handler:

<script>
    $(document).ready(doSearch);

    function doSearch() {
        $('#<%= UpdatePanel1Trigger.ClientID %>').click();
        return false;
    }
</script>

aspx:

//if i click this button the updateprogress works
//and the panel loads
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="form-control"  
 OnClientClick="return doSearch();"  />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"
    OnLoad="UpdatePanel1_Load" ChildrenAsTriggers="true">
    <ContentTemplate>
        <asp:Button ID="UpdatePanel1Trigger" runat="server" 
               style="display:none" OnClick="UpdatePanel1Trigger_Click" />
        <%--gridview that takes a while to load--%>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" 
    AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1">
    <ProgressTemplate>
        <asp:Image ID="imgUpdateProgress1" runat="server" 
        ImageUrl="~/Images/spinner.gif" AlternateText="Loading ..." ToolTip="Loading ..."/>
    </ProgressTemplate>
</asp:UpdateProgress>

Codebehind:

    protected void UpdatePanel1Trigger_Click(object sender, EventArgs e)
    {
        if (!String.IsNullOrEmpty(m_search))
        {
            performSearch(); //loads data for gridview in updatepanel
        }
    }

No correct solution

OTHER TIPS

At last I think I found it:

<%@Page Language="VB" AutoEventWireup="false"
         CodeFile="prueba.aspx.vb" Inherits="Programación_prueba" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
  <asp:UpdateProgress runat="server" ID="PageUpdateProgress">
    <ProgressTemplate>
      Loading...
    </ProgressTemplate>
  </asp:UpdateProgress>
  <asp:UpdatePanel runat="server" ID="Panel">
    <ContentTemplate>
      <asp:Button runat="server" ID="UpdateButton" OnClick="UpdateButton_Click" Text="Update"/>
      <asp:Timer runat="server" ID="UpdateTimer" Interval="5000" OnTick="UpdateTimer_Tick"/>
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick"/>
    </Triggers>
  </asp:UpdatePanel>
</form>
</body>
</html>

This is the code behind:

Partial Class Programación_prueba
    Inherits System.Web.UI.Page

    Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles UpdateButton.Click
        System.Threading.Thread.Sleep(3000)
    End Sub

    Protected Sub UpdateTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles UpdateTimer.Tick
        Me.UpdateButton_Click(Me.UpdateButton, Nothing)
    End Sub
End Class

Many thanks for all the ideas. Aurelio J. Maldonado

Could be something in a way jQuery library interferes with MS AJAX library. Try to force it to show:

<script>
    $(document).ready(function() {
         $('#<%= UpdateProgress1.ClientID %>').show();    
         doSearch();
    });

    function doSearch() {
        $('#<%= UpdatePanel1Trigger.ClientID %>').click();
        return false;
    }
</script>

As an alternative instead jQuery's $(document).ready try using MS approach:

<script>
    Sys.Application.add_load(doSearch);

    function doSearch() {
        $('#<%= UpdatePanel1Trigger.ClientID %>').click();
        return false;
    }
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top