Update Panel Animation isn't showing up

Go To StackoverFlow.com

0

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?

2009-06-16 19:23
by David
@David - Are Ajax features working properly elsewhere on the site? I.e. are update panels performing Async postbacks where expected - Rob Allen 2009-06-16 19:28
We tried some UpdatePanel stuff a while back but it wasn't working - thought it might be a problem with our web server when trying to call web services (didn't have the time to properly diagnose). But things like the Accordion extender and Panelrounder work just fine - David 2009-06-16 19:34
we had some animation that we were using while a grid was loading but the load happened so fast that we couldn't see the animation. This might be what's happening here in which case you would need to slow it down to see it although I don't know how you would do it here. Increase duration maybe - Bryan 2009-06-16 19:38
The update can take as much as 30 seconds. I guess what I'm missing is what it is that really 'fires' the code to pop the panel up. At least if it 'flashed' and vanished on quick updates, I could work with it but I'm not seeing anything and that's what's so confusing - David 2009-06-16 19:46


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>
2009-06-16 19:33
by waqasahmed
The order of the stuff on the page is:

<%@ Page directives...

<%@ Register - for the Ajax kit

...followed by what I outlined above - David 2009-06-16 19:39

I have amended my editm to include part of my code. The above code is in a tabPanel (but can be anywhere). Hope you can make sense of it - waqasahmed 2009-06-17 09:51
Ads