ASP.NET: Manually updating an UpdatePanel using jQuery

Question

I'm having trouble with updating an ASP:UpdatePanel using javascript (jQuery). Here're what I have.

I'm using the hidden button trick as I seem not the be able to get the ClientID of the update panel for a __doPostBack trick).

<asp:UpdatePanel runat="server" ID="pnlUpdate">

<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" />
</Triggers>

<ContentTemplate>

<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="pnlUpdate" DynamicLayout="false" DisplayAfter="100">
<ProgressTemplate>
<img alt="Laddar..." src="img/loader.gif" width="16" height="11"/>  
</ProgressTemplate>
</asp:UpdateProgress>

<div style="display:none;">  
<asp:Button runat="server" ID="btnUpdate" CommandName="Refresh" CommandArgument='<%# Eval("Id") %>'/>
</div>

<asp:Repeater runat="server" Id="rptrEnquiry">
...
</asp:Repeater>


<%= DateTime.Now.ToString() %>

<a href="javascript:jQuery('#<%= btnUpdate.ClientID %>').trigger('click')&&undefined;">Fire!</a>

</ContentTemplate>

</asp:UpdatePanel>

In the codebehind that handles the btnUpdate (in a GridView RowCommand) the rptrEnquiry is rebound when btnUpdate is pressed.

If I press the button directly (while not hidden) everything works perfectly (updateprogess is shown and date updated and repeater updated.

But if I click the fire link and trigger the button through javascript only the date is updated but the updateprogress isn't shown and the repeater isn't rebound. While debugging I can see that the rebound code is executed but it's effect isn't in the update.

Answer 1

Have you tried something like this? (Taken from Easily refresh an UpdatePanel, using JavaScript).

there’s an easy method for triggering a postback targeted at the UpdatePanel: __doPostBack().

As long as the event target of a __doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET AJAX framework will intercept the postback and fire a partial postback instead.

<a href="#" onclick="__doPostBack('<%= pnlUpdate.ClientID %>', '');"/>

Answer 2

Ok, so I mangaged to solve my problems by totally rebuilding the whole thing. A few lessons learned that might help someone else:

I'm having the updatepanel in a gridview, when I sepparated the updatepanel part into a control of it's own most of my problems was solved, such as not beeing able to reference pnlUpdate.

http://encosia.com/2007/10/24/are-you-making-these-3-common-aspnet-ajax-mistakes/ was very helpful.

Updates in the update panel is controlled in it's PreRender. By using __EVENTTARGET only the panel we're interested in, is updated.

protected void pnlUpdate_PreRender(object sender, EventArgs args)
{
    if (Request["__EVENTTARGET"] == pnlUpdate.ClientID)
    {
        PreBind();

        switch(Request["__EVENTARGUMENT"])
        {
            case "toggle":
                Toggle();
                break;
            case "purchase":
                Purchase();
                break;
            case "update":
                /* nop */
                break;
        }

        Bind();
    }
}

To get the __EVENTTARGET to have the proper clientId (it's empty string if using a button) I needed to fire of the panel update using javascript:

<a href="javascript:__doPostBack('<%=  pnlUpdate.ClientID %>','toggle');">
<img runat="server" ID="imgToggle" src="~/img/grid_plus.gif" title="Expandera" alt="" width="14" height="14"/>
</a>