How to get an ASP.NET page_load event to trigger AJAX UpdatePanel update

Question

I have a page in ASP.NET which has some updatepanels on it. After the page has loaded, I want the updatepanels to trigger the updatepanels to update.

I'm working using this answer which says to put this Javascript on the page.

$(document).ready(function () {
    window.__doPostBack('<%= hiddenAsyncTrigger.ClientID %>', 'OnClick');
});

However, this causes the click event to be spammed becasue the load event is triggering antoher load... ??

The update panels all function fine, the issue is with triggering the update to occur once after the page has loaded

Chris Gessler · Answer 1 · 2013-05-13T12:15:48.397

Use a client-side control instead of server-side:

<%@ Page Language="C#" %>
<script runat="server">
  protected string CurrentTime()
  {
    return DateTime.Now.ToString();
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Untitled Page</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script language="JavaScript">
      $(document).ready(function () {
        $("#Updater").click()
      });
    </script>
  </head>

  <body>
    <form id="MyForm" runat="server">
      <div>
        Outside the panel: <%=CurrentTime() %>
      </div>
      <br />
      <br />
      <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
      <asp:UpdatePanel ID="panel" runat="server" UpdateMode="conditional">
        <ContentTemplate>
          <div>
            Inside the panel: <%=CurrentTime() %>
          </div>
          <input type="submit" id="Updater" style="display: none" />
        </ContentTemplate>
      </asp:UpdatePanel>
    </form>
  </body>
</html>

Another solution - without a hidden trigger, using __doPostBack

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplicationTest.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script language="JavaScript">
        $(document).ready(function () {
            __doPostBack('panel', '');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Outside the panel: <%=CurrentTime() %>
        </div>
        <br />
        <br />
        <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
        <asp:UpdatePanel ID="panel" runat="server" UpdateMode="conditional">
            <ContentTemplate>
                <div>
                    Inside the panel: <%=CurrentTime() %>
                </div>
                <input type="submit" id="Updater" style="display: none" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplicationTest
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected string CurrentTime()
        {
            System.Diagnostics.Debug.WriteLine("CurrentTime was called");
            return DateTime.Now.ToString();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("PageLoad was called");
        }
    }
}

The first solution wont be async because you stil lhave to wait for CurrentTime() to run ? — SkeetJon, May 13 '13 at 13:30
Same for the second solution because the <%=CurrentTime() %> method is called on Page_Load. I think I'm missing something — SkeetJon, May 13 '13 at 13:31
@SkeetJon - Update panels perform an Asynchronous Postback via JavaScript. The first two calls to <%=CurrentTime() %> are not asynchronous, but only exist for this demo and are not really needed. Feel free to remove them. — Chris Gessler, May 13 '13 at 15:42
So where does the server side code live that updates the panel if using a client side control? — SkeetJon, May 14 '13 at 06:46

score 1 · Accepted Answer · answered May 14 '13 at 09:55

Ended up solving this with Javascript triggering a hidden button in the updatepanel

JS

var timer;
var polling_interval = 30000;

$(document).ready(function () {
    TriggerUpdatePanelUpdate();// update as soon as DOM is ready
    StartPolling();
});

function StartPolling() {
    PollLoop();
}

function StopPolling() {
    clearTimeout(timer);
}

function PollLoop() {
    timer = setTimeout(
        function() {
            TriggerUpdatePanelUpdate();
            PollLoop();
        },
        polling_interval 
    );
}

function TriggerUpdatePanelUpdate() {
    document.getElementById('hiddenAsyncTrigger').click();
}

HTML

<asp:Button ID="hiddenAsyncTrigger" runat="server" OnClick="DoWork" Text="AsyncUpdate" style="display: none;"/>

How to get an ASP.NET page_load event to trigger AJAX UpdatePanel update

2 Answers2