Update animation panel expander with a panel with several updates

Question

AT:

I use the extension bar animation extender  , it works so well, but unfortunately, when I have more than the update bar on the same page and any partial mail back for any update bar on the page, the extender works (enlivens) ..

How to make the expander work with the intended one (the one I add the extension only) .. please sample if possible

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 another update panel, when you click the button in it, it launches an expander in this update panel to fix this problem.

Thanks in advance.

Answer 1

ASP.NET (, , ):

---

, . :

javascript

<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>

ConditionScript UpdatePanelAnimationExtender :

<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>

( ) , .

---

, , .