Update an UpdatePanel manually using JavaScript or jQuery

Question

Is it possible to update an UpdatePanel manually using JavaScript or jQuery?

What I have is a TextBox at the top of my page. When a user leaves that TextBox I want to run some server code (it will add a record to my database) then at the bottom of the page I have an UpdatePanel which will get refreshed. The UpdatePanel has a GridView which will have an entry for the record added)

score 25 · Accepted Answer · answered Aug 16 '10 at 05:33

Just call this javascript function. Here UpdatePanel1 is updatepanel's ID

 <script type="text/javascript">

            var UpdatePanel1 = '<%=UpdatePanel1.ClientID%>';

            function ShowItems()
            {
               if (UpdatePanel1 != null) 
               {
                   __doPostBack(UpdatePanel1, '');
               }
            }       

        </script>

score 12 · Answer 2 · edited Apr 16 '14 at 08:49

12

I think I got my answer... have to create a hidden button in the UpdatePanel then call

__doPostBack('<%= Button.ClientID %>','');

edited Apr 16 '14 at 08:49

Howli

12,291
19
47
72

answered Aug 16 '10 at 04:00

Rush Frisby

11,388
19
63
83

score 10 · Answer 3 · answered Nov 27 '15 at 14:23

Although an old question, I think it deserves the mention of one more solution.

If you do not wish to rely on hidden buttons or the illusive __doPostBack, there is the option of "ClientScript.GetPostBackEventReference", as described on this (likewise rather old but still great) page:

https://web.archive.org/web/20211020103534/https://www.4guysfromrolla.com/articles/033110-1.aspx

In short, if your UpdatePanel is declared like this:

<asp:UpdatePanel ID="MyUpdatePanel" runat="server">...</UpdatePanel>

then in JavaScript you can call the script that is generated by this server side code:

ClientScript.GetPostBackEventReference(MyUpdatePanel, "")

So in your aspx page you could have something like this:

function MyJavaScriptFunction(){
   doSomeStuff();
   <%=ClientScript.GetPostBackEventReference(MyUpdatePanel, "")%>
}

The code between <% and %> will be replaced with an actual javascript call when the page is parsed, so you can have a look at it by viewing the source code of the page in your browser.

It may not be easier than the other replies, but I prefer it since it does not introduce any extra elements and __doPostBack feels like a hack. :-)

Rony · Answer 4 · 2011-07-18T14:47:03.923

3

Well, in my case the answer was the use of the UniqueID. ClientID did not work.

 __doPostBack("<%=btnTest.UniqueID %>", "");

This works perfectly. Don't ask me why.

edited Jul 18 '11 at 14:47

answered Jul 18 '11 at 14:30

Rony

31
2

score 2 · Answer 5 · answered Jun 28 '13 at 11:00

Create function for async postback:

    function __doPostBackAsync(eventName, eventArgs) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        if (!Array.contains(prm._asyncPostBackControlIDs, eventName)) {
            prm._asyncPostBackControlIDs.push(eventName);
        }

        if (!Array.contains(prm._asyncPostBackControlClientIDs, eventName)) {
            prm._asyncPostBackControlClientIDs.push(eventName);
        }

        __doPostBack(eventName, eventArgs);
    }

Call this function where you need (in click event, load event, ...):

 __doPostBackAsync("UpdatePanel1", "");

In codebehind Page_Load check asynchronous postback and update desired UpdatePanel:

if (scriptManager.IsInAsyncPostBack)
{
      if (Request["__EVENTTARGET"] == UpdatePanel1.ID)
      {
         ...

         //Do update
         UpdatePanel1.Update();
      }
}

score 0 · Answer 6 · answered Apr 16 '14 at 08:32

You just need call change() on control witch you triggered in your updatePanel.

For example:

  <asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1" ChildrenAsTriggers="True">
    <ContentTemplate>
      <asp:DropDownList ID="ddl" runat="server" Visible="true" AutoPostBack="true" CssClass='someClass' />
    </ContentTemplate>
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID="ddl" EventName="SelectedIndexChanged" />
    </Triggers>
  </asp:UpdatePanel


<script>          
  $(".someClass").change();
 </script>

score 0 · Answer 7 · answered Jun 23 '15 at 13:37

This works for me:

<asp:UpdatePanel id="pnl" UpdateMode="Conditional" runat="server">
 <contentemplate>
    <div>...your content...</div>
     <div style="display: none; line-height: 0pt;">
        <asp:Button id="btnUpdate" runat="server" UseSubmitBehavior="false"  />
     </div>
</contentemplate>
</asp:UpdatePanel>

JavaScript:

function doUpdate()
{
  var btn = document.getElementById("<%#= btnUpdate.ClientID %>");
  if(btn != null) { btn.click(); }
}

score -1 · Answer 8 · answered Sep 11 '13 at 11:52

ASPX:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_OnLoad" > ...

CodeBehind:

protected void UpdatePanel1_OnLoad(object sender, EventArgs e)
{
    var rawArguments = Page.Request["__EVENTARGUMENT"];
    if(rawArguments != null)
    {
        var arguments = HttpUtility.ParseQueryString(rawArguments);

        switch (arguments["EventName"])
        {
            case "Event1":
                var parameter1Value = arguments["parameter1"];
                var parameter2Value = arguments["parameter2"];
                break;
        }
    }
}

Javascript:

function updatePanelPartialPostback(updatepanelId, eventName, parameters) {
    var parametersParsed = "EventName=" + eventName + "&";

    for (var propertyName in parameters) {
        parametersParsed += propertyName + '=' + parameters[propertyName] + '&';
    }

    __doPostBack(updatepanelId, parametersParsed);
}


updatePanelPartialPostback('<%= UpdatePanel1.ClientID %>', 'Event1', { parameter1: 'value1', parameter2: 'value2' });

Update an UpdatePanel manually using JavaScript or jQuery

8 Answers8

Linked