Unable to get ASP.Net UpdateProgress to display

Question

I'm trying to display an update progress loading image whenever my update panel does it's Ajax thing. I've looked around at tutorials and it seems really straightforward but I'm having no luck. Here is pretty much what I have...

<div id="panelWrapper">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:UpdateProgress ID="TaskUpdateProgress" runat="server" DynamicLayout="False" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
            <ProgressTemplate>
                <asp:Image ImageUrl="~/Images/ajax-loader.gif" Width="16px" Height="16px" runat="server" ID="TaskLoadingImage"/>
            </ProgressTemplate>
        </asp:UpdateProgress>

        <div id="UrlDiv" class="URLNotification">
            <asp:Label ID="UrlLabel" runat="server" Text="URL:" AssociatedControlID="Url" />
            <asp:HyperLink ID="Url" runat="server" Text="Click &quotGenerate" to create the URL." />
        </div>

        <br />

        <asp:CheckBoxList runat="server" ID="IncludeItems" TextAlign="Right">
            <asp:ListItem Selected="True">Include 1</asp:ListItem>
            <asp:ListItem Selected="True">Include 2</asp:ListItem>
        </asp:CheckBoxList>

        <br />

        <div id="buttons" style="display:inline;">
            <asp:Button ID="Generate" runat="server" OnClicked="Generate_Clicked" Text="Generate" />
            <asp:Button ID="Add" runat="server" OnClientClick="add();" Text="Add"/>  
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

I also have some absolute positioning styling in a stylesheet. I've tried a bunch of variations of what you see here and have not found much good information as to what may be the issue. Any ideas? If you need anything else, let me know.

EDIT: The only new information I've found is that...

"In the following scenarios, the UpdateProgress control will not display automatically:

The UpdateProgress control is associated with a specific update panel, but the asynchronous postback results from a control that is not inside that update panel.

The UpdateProgress control is not associated with any UpdatePanel control, and the asynchronous postback does not result from a control that is not inside an UpdatePanel and is not a trigger. For example, the update is performed in code."

I'm pretty confident neither of these fit into my case. All that is happening is the button (which is inside the update panel) is clicked calling some code behind which set's the URL text to be reloaded for the update panel.

Answer 1

I have also the same problem with the UpdateProgressPanel. I found out that when you have placed an UpdateProgressPanel and associated it to an UpdatePanel, any postback from that UpdatePanel will cause the UpdateProgressPanel to show.

Another trick to do is to remove the AssociatedUpdatePanel parameter if you have a single UpdatePanel on the page, this will cause the UpdateProgressPanel to show every Async PostBack that happens.

UpdateProgressPanel can be placed anywhere in the code, except those areas that have predefined tags on it. It can be placed inside or outside the UpdatePanel and it will show if you have properly placed its CSS, Associated it to an UpdatePanel or just place it there and it will show up if an async postback result happens.

Answer 2

Don't put the update progress control inside the update panel control