Multiple UpdatePanel postback trigger updateprogress animation of other UpdatePanel - asp.net

Question

I have multiple UpdatePanels on a webpage, one inside UserControl (Purple ColorBox as show in image) and other inside the main page. When the paging user-control (< 1 2 3 >) of Main page is invoked it shows the corresponding UpdateProgress of 'Latest News' Section but also shows the UpdatePanelAnimationExtender of 'Subscribe' User-control.
I am using UpdatePanelAnimationExtender for user-control and UpdateProgress for the Latest-New which is on the main page.
I tried to change the properties but it keeps on coming; if I keep UpdateMode="Conditional" for user control then progress bar goes in loop and show continuously.
Screen Shot
How can I make changes to this code to show only corresponding progress bar. I have looked over 50 example from last few days but nun seems to be working. I would appreciate if someone can help me to get this fixed.
<!-- LatestNewArea -->
<div class="LatestNewArea">
<asp:UpdatePanel ID="updLatestNews" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptLatestNews" runat="server" EnableViewState="False" onitemdatabound="rptLatestNews_ItemDataBound">
<ItemTemplate>
<asp:HyperLink ID="hylLatestNews" CssClass="chylLatestNews" runat="server" NavigateUrl=''>
<div class="LatestNewsWrapper">
<div class="LatestNewsDateBox">
<div class="LNYYYY">
<asp:Label ID="lblYYYY" runat="server" Text="2012"></asp:Label>
</div>
<div class="LNDDMM">
<asp:Label ID="lblDDMM" runat="server" Text="12/08"></asp:Label>
</div>
</div>
<div class="LatestNewsTitle">
<asp:Label ID="lblLatestNewsTitle" runat="server" Text="First News for the Website"></asp:Label>
</div>
<div class="LatestNewsHDate">
<asp:Label ID="Label1" runat="server" Text="Hijri: 15 Rajab 1433"></asp:Label>
</div>
<div class="LatestNewsDesc">
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
</div>
</div>
<div class="LNHLine"> </div>
</asp:HyperLink>
</ItemTemplate>
</asp:Repeater>
<!-- Pager -->
<div class="LatestNewsPagerWrapper">
<div class="LatestNewsPagerInnerWrapper">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="50" AssociatedUpdatePanelID="updLatestNews" >
<ProgressTemplate>
<div id="imgLoadingArticleList" class="imgLoadingArticleList">
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/images/ajax-loader-bar2.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<uc1:PagerControl ID="PagerControl1" runat="server" CssClass="gold-pager" PageMode="LinkButton" />
</div>
</div>
<!-- Pager -->
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!-- LatestNewArea -->
User Control Page Code
<script type="text/javascript">
function onUpdating() {
// get the divImage
var panelProg = $get('divImage');
// set it to visible
panelProg.style.display = '';
// hide label if visible
var lbl = $get('<%= this.pnlSubscribe.ClientID %>');
lbl.innerHTML = '';
}
function onUpdated() {
// get the divImage
var panelProg = $get('divImage');
// set it to invisible
panelProg.style.display = 'none';
}
</script>
<table cellpadding="0" cellspacing="0" class="SubscribeContainer">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="SubscribeWrapper" border="0">
<tr>
<td valign="top">
<asp:UpdatePanel ID="updSubscribe" runat="server" >
<ContentTemplate>
<asp:Panel ID="pnlSubscribe" runat="server" Height="10px">
<div class="SubHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dSubName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dSubEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" ValidationGroup="SubEmail" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</asp:Panel>
<div class="dSubMSG">
<asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
</div>
<div id="divImage" style="display:none" class="dSubAni">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader-sub.png" Visible="true"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="updSubscribe" runat="server">
<Animations>
<OnUpdating>
<Parallel duration="0">
<ScriptAction Script="onUpdating();" />
<EnableAction AnimationTarget="btnSubscribe" Enabled="false" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="onUpdated();" />
<EnableAction AnimationTarget="btnSubscribe" Enabled="true" />
</Parallel>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
</td>
</tr>
</table>
</td>
</tr>
</table>
Other Info: ASP.Net 4.0, C# & Paging control is a user control that uses linkbutton for paging

Answer 1

I tried many solution but non of them worked in a proper way. Finally i decided to replace UpdatePanelAnimationExtender of user control with UpdateProgress as I was able to trap the initiating UpdatePanel for AsyPostback
For some reason i was not able to trap AsyPostback when i used UpdatePanelAnimationExtender
This approach can be used for multiple update panel one need to trap the initiating control for post-back
BELOW IS A WORKING CODE
// Function to hide control on update
function onUpdateOfSubscribe() {
var panelProg = $get('divImage');
// set it to visible
panelProg.style.display = '';
// hide label if visible
var lbl = $get('<%= this.pnlSubscribe.ClientID %>');
lbl.innerHTML = '';
}
//Code to track the initiating event so to associate updateprogress
var currentPostBackElement;
function pageLoad() {
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_initializeRequest(OnInitializeRequest);
}
//On OnInitializeRequest
function OnInitializeRequest(sender, args) {
var manager = Sys.WebForms.PageRequestManager.getInstance();
currentPostBackElement = args.get_postBackElement().parentElement;
var cmdAuthoriseButton = '<%= btnSubscribe.ClientID %>';
if (cmdAuthoriseButton == args._postBackElement.id) {
// Show UpdateProgress for subscribe
onUpdateOfSubscribe();
}
}
</script>
<table cellpadding="0" cellspacing="0" class="SubscribeContainer">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="SubscribeWrapper" border="0" >
<tr>
<td valign="top">
<asp:UpdatePanel ID="updSubscribe" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Panel ID="pnlSubscribe" runat="server" Height="10px">
<div class="SubHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dSubName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dSubEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" ValidationGroup="SubEmail" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</asp:Panel>
<div class="dSubMSG">
<asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
</div>
<div id="divImage" style="display:none" class="dSubAni">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader-sub.png" Visible="true"/>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubscribe" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updSubscribe" >
<ProgressTemplate>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</table>
</td>
</tr>
</table>