Update Panel animation extender with multi update panel - asp.net

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=">>"
PreviousPageText="<<" 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

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.

Answer 2

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.