Update Panel Animation isn't showing up

Question

I can't seem to get an update panel with an animated GIF to pop-up when following a simple "recipe" in a popular blog.

We're using ASP.NET 3.5 with VB codebehind pages (a little bit of AJAX sprinkled in but nothing complex). The users are presented with a "selection page" full of the data they're allowed to edit. The page has some checkboxes and drop-down lists at the top that are used as filters for the gridview right below. Clicking the appropriate link on a given rown redirects you to a detail page for that item.

The checkboxes, when triggered, cause another trip to the database to grab the list of objects that the datagrid is bound to (indicating what classes of objects are to be read from the database). The drop-down lists are used to 'filter' the display. Those filters run very quickly - no problem there. However, certain trips to the database call up a lot of historical data and it takes a while for the page to redisplay. We wanted something on the screen to tell the user that the software is running.

We decided on trying the methodology used here in Matt Berseth's blog

Unfortunately I must be doing something wrong as I'm not getting the pop-up animation panel.

The first difference is that the page in question has a master page - I don't know if that's critical. But here are snippets of the aspx after the asp:Content and asp:ScriptManager tags:

First I have the onUpdating and onUpdate functions as in the example on the referenced page, modified only to comply with the name of my GridView.

Then there's the start of the 'wrapping' div that starts with a table where the checkboxes and drop-down lists are.

An example of how they're defined is as follows:

    <asp:TableCell ID="TableCell4" runat="server"><asp:CheckBox ID="chkShowCancelled" runat="server" Text="Cancelled" AutoPostBack="True" /></asp:TableCell>
    <asp:TableCell>TO#:<asp:DropDownList ID="ddlTO" runat="server" AutoPostBack="True"></asp:DropDownList></asp:TableCell>

After that, is the UpdatePanel with the gridview in it:

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView ID="grdRequests" runat="server" Style="z-index: 100; left: 0px; top: 0px" 
            AutoGenerateColumns="False" CellPadding="4" Font-Size="Small" ForeColor="#333333" 
            GridLines="None" PageSize="25" AutoGenerateSelectButton="False" AllowSorting="True" Width="100%" EnableViewState="False">
            <HeaderStyle CssClass="tableheader" />
            <FooterStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                 ...Template Fields Deleted for Brevity...
            </Columns>
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#034EA1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
    </ContentTemplate> </asp:UpdatePanel>

Right after that is the AnimationExtender and the popup panel

<cc1:UpdatePanelAnimationExtender runat="server" TargetControlID="updatePanel">
    <Animations>
        <OnUpdating>
            <Parallel duration="0">
                <ScriptAction Script="onUpdating();" />
            </Parallel>
        </OnUpdating>
        <OnUpdated>
            <Parallel duration="0">
                <ScriptAction Script="onUpdated();" />
            </Parallel>
        </OnUpdated>
    </Animations>
</cc1:UpdatePanelAnimationExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style="display:none;">
    <div class="pcontainer">
        <div class="pheader">Loading, please wait...</div>
        <div class="pbody">
            <img alt="Progressing..." src="~/Images/activity.gif" />
        </div>
    </div>
</asp:Panel>

Then just the end tag for the 'wrapping' div just before the table.

In the examples, Matt simply puts the page to sleep with a System.Threading.Thread.Sleep(3000) statement in his Page.Load (after checking IsPostback) to let the animation pop up and display. I've got plenty going on in the Page.Load (codebehind in VB) but the animation simply does NOT come up when I click on one of the checkboxes (to make a long trip to the database) or select something from a drop-down list (to filter the results I already have).

If it matters, the wrapping div that has the Table, GridView, UpdatePanel, UpdatePanelAnimationExtender is defined with no properties. It was really only there to delineate the Javascript from the asp tags.

What am I missing?

Answer 1

Okay I have used AJAX control toolkit 1.0 with .net 2.0 and my update panel works perfectly.

Firstly, where is your javascript code?

EDIT: Here is my code which works:

                                <ContentTemplate>
                                     <asp:UpdateProgress id="tab1Updating" runat="server" AssociatedUpdatePanelID="tab1Update">
                                                    <ProgressTemplate>
                                                        <div>
                                                            <img src="./IMG/loader.gif" alt="loading" /> 
                                                               Please Wait...
                                                        </div>
                                                    </ProgressTemplate>
                                     </asp:UpdateProgress>
                             </ContentTemplate>
                             </asp:UpdatePanel>

                         </ContentTemplate>