Update Panel animation extender with multi update panel

Question

Q:

I use Update Panel animation extender ,, it works so good but unfortunately ,,when i have more than update panel on the same page and any partial post back for any update panel on the page the extender works (animate)..

How to make the extender works with the intended one (the one i add the extender to Only)..please sample if possible

The Script:

    <script type="text/javascript" language="javascript">
    function onUpdating() {
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv');
        // make it visible
        updateProgressDiv.style.display = '';

        //  get the gridview element
        var gridView = $get('<%=this.pnl_courseImg.ClientID %>');

        // get the bounds of both the gridview and the progress div
        var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
        var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);

        //    do the math to figure out where to position the element (the center of the gridview)
        var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
        var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);

        //    set the progress element to this position
        Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
    }
    function onUpdated() {
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv');
        // make it invisible
        updateProgressDiv.style.display = 'none';
    }
</script>

My ASPX:

<asp:Panel ID="pnl_courseImg" runat="server" HorizontalAlign="Center">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <contenttemplate>
                                            <br />
                                             <asp:ListView ID="lv_showCourseImages" runat="server" ItemPlaceholderID="a" 
                                                    onitemcommand="lv_showCourseImages_ItemCommand">
                          <LayoutTemplate>
                                                <table ID="Table1" runat="server" cellpadding="2" cellspacing="2" 
                                                    >

                                                    <tr ID="a" runat="server">
                                                    </tr>
                                                </table>
                                            </LayoutTemplate>
                                            <ItemTemplate>
                                                <tr ID="Tr1" runat="server">
                                                    <td>
                                                        <asp:Image ID="img_news" runat="server" ImageUrl='<%# "CourseImages" + "/" + Eval("FK_CourseCode") + "/"+  Eval("photoName")%>'  BorderWidth="4px" Height="355px" 
                            Width="410px"/>
                                                    </td>

                                                </tr>
                                                <tr id = "tr2" runat ="server">
                                                <td>
                                                    <asp:HiddenField ID="hf_newsImage" runat="server" Value ='<%#Eval("photoId")%>'/>
                                                    <asp:Button ID="btn_deleteImg" runat="server" Text="Delete" CommandName ="deleteImage" />
                                                    </td>
                                                </tr>
                                            </ItemTemplate>

                        </asp:ListView>
                         <asp:DataPager ID="dp_CourseImages" runat="server" 
                             PagedControlID="lv_showCourseImages" 
                            PageSize="1" onprerender="dp_CourseImages_PreRender">
                            <Fields>

                                <asp:NextPreviousPagerField ButtonType="Button" NextPageText="&gt;&gt;" 
                                    PreviousPageText="&lt;&lt;" ShowFirstPageButton="True" 
                                    ShowLastPageButton="True" />
                                     </Fields>
                        </asp:DataPager>

                        </contenttemplate>
        </asp:UpdatePanel>
        <cc3:updatepanelanimationextender id="UpdatePanel2_UpdatePanelAnimationExtender"
            runat="server" enabled="True" behaviorid="animation" targetcontrolid="UpdatePanel2">
                                                     <Animations>
                                                     <OnUpdating>
                                                         <Parallel duration="0">
                                                  <%-- place the update progress div over the gridview control --%>
                                                 <ScriptAction Script="onUpdating();" />  
                                                  <%-- disable the search button --%>                       
                                                     <EnableAction AnimationTarget="btn_deleteImg" Enabled="false" />
                                                     <%-- fade-out the GridView --%>
                                                     <FadeOut minimumOpacity=".5" />
                                                     </Parallel>
                                                     </OnUpdating>
                                                     <OnUpdated>
                                                     <Parallel duration="0">
                                                     <%-- fade back in the GridView --%>
                                                     <FadeIn minimumOpacity=".5" />
                                                     <%-- re-enable the search button --%>  
                                                     <EnableAction AnimationTarget="btn_deleteImg" Enabled="true" />
                                                     <%--find the update progress div and place it over the gridview control--%>
                                                    <ScriptAction Script="onUpdated();" /> 
                                                    </Parallel> 
                                                    </OnUpdated>
                                                    </Animations>

                                                </cc3:updatepanelanimationextender>
    </asp:Panel>

i have one more update panel when click the button in it it fires the extender in this update panel how to fix this problem.

Thanks in advance..

Answer 1

The Ajax Control Toolkit is now maintained by DevExpress, and this bug has been resolved. I updated my DLL to version 18.1, and I'm no longer experiencing the problem.

Answer 2

Stolen from the ASP.NET Forums (sorry, didn't know how to get a link directly to the specified thread post):

---

Okay I solved it. here is my solution:

Just add the following javascript to your page

<script type="text/javascript">
var currentPostBackElement;

function pageLoad()
{
    var manager = Sys.WebForms.PageRequestManager.getInstance();
    manager.add_initializeRequest(OnInitializeRequest);
}


function OnInitializeRequest(sender, args)
{
    var manager = Sys.WebForms.PageRequestManager.getInstance();
    currentPostBackElement = args.get_postBackElement().parentElement;
}
</script>

and use the ConditionScript in the UpdatePanelAnimationExtender as followed:

<ajaxToolkit:UpdatePanelAnimationExtender ID="MyExtender" runat="server" TargetControlID="updPanel">
    <Animations>
        <OnUpdating>
            <Condition ConditionScript="currentPostBackElement.name == 'updPanel' ">
                <FadeOut AnimationTarget="updPanel" minimumOpacity=".1" Fps="30" /> 
            </Condition>
        </OnUpdating>
        <OnUpdated>
            <Condition ConditionScript="currentPostBackElement.name == 'updPanel' ">
                <FadeIn AnimationTarget="updPanel" minimumOpacity=".1" Fps="30" /> 
            </Condition>
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

Its important to have the trigger (in my case a timer) in the update panel which should be refreshed. so you can get the parent

---

I didn't test this solution by I hope it will help you.