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)

Answer 1

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>

Answer 2

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

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

Answer 3

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. :-)

Answer 4

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.