Why does an update update fail when the AssociatedUpdatePanelId parameter is set?

Question

When I assign AssociatedUpdatePanelId, progress is not displayed when I select a state, but when I leave it blank it displays progress.

Here is the aspx markup:

<div> <asp:ListBox ID="lstStates" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstStates_SelectedIndexChanged" SelectionMode="Multiple"> </asp:ListBox> </div> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="pnlCounty" runat="server"> <asp:ListBox ID="lstCounties" runat="server" SelectionMode="Multiple"> </asp:ListBox> </asp:Panel> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="lstStates" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress2" runat="server" DisplayAfter="1" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <img src="../images/loader2.gif" /> Loading Counties... </ProgressTemplate> </asp:UpdateProgress> </div> 

Answer 1

According to this article, external triggers for UpdatePanel do not start the associated UpdateProgress, because the implementation of the inclusion of the UpdateProgress control searches for the hierarchy control for the calling control; An external control will not be present in the control hierarchy.

The article, however, suggests introducing some JavaScript to make up for this error; I changed it (hopefully) according to your needs:

 <script type="text/JavaScript" language="JavaScript"> function pageLoad() { var manager = Sys.WebForms.PageRequestManager.getInstance(); manager.add_endRequest(endRequest); manager.add_beginRequest(OnBeginRequest); } function OnBeginRequest(sender, args) { var postBackElement = args.get_postBackElement(); if (postBackElement.id == 'lstStates') { $get('UpdateProgress2').style.display = "block"; } } </script>