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

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

Answer 2

I guess I figured out what was going on. The issue wasn't with anything I was doing wrong with the UpdateProgress or Panel. It was that I had other stuff loading in the background that was apparently holding up the UpdatePanel's Ajaxyness.

So basically what happened was that the loading icon wouldn't show up on the initial page load. I realized this because I actually waited till after everything on the page was completely loaded to fire off the button. Sure enough the loader showed up.

I assumed that the update panel refresh would at least be requested the instant the click event was heard so the loader icon would immediately show during the time other stuff is loading. This doesn't appear to be the case though...

Answer 3

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 4

I have a similar problem:

An asp:ImageButton with "postbackurl" property set which does not show the ProgressTemplate. But if I remove the "postbackurl" then the ProgressTemplate is displayed.

Answer 5

This is clearly a bug. I have tried everything.

Answer 6

I was having really hard time after converting my project from VS2008 to VS2010. The UpdateProgress stopped working suddenly, which was fine in VS2008. Spending a whole afternoon to search the answer and experimenting this and that, finally I found what went wrong from Scott Gu's posting.

It was an automatically generated web.config entry 'xhtmlConformance mode="Legacy"'.

After disabling this, it started to work again. May be not the case for you but just for guys struggling with the same problem.

Happy coding

Answer 7

Make sure the UpdateProgress 'DisplayAfter' is set up to 100 (1 sec)