Multiple UpdatePanelAnimationExtender AjaxControlToolKit Controls

Question

I have a problem with UpdatePanelAnimationExtender and multiple update panels. I want the panel to disappear, update, and then disappear again.

However, it disappears from all panels and only disappears when I update. Obviously, this is a fairly common problem with UpdatePanelAnimationExtender, but I can not find a solution. Does anyone possibly know a way to solve this problem? Thanks in advance.

Here is a sample code:

<asp:UpdatePanel ID="update1" runat="server" UpdateMode="Conditional">
  //--My Code goes in here
</asp:UpdatePanel>

<cc1:UpdatePanelAnimationExtender ID="updateAnimation1" runat="server" TargetControlID="update1">
     <Animations>
         <OnUpdating>
              <FadeOut Duration="0.2" Fps="20" />
         </OnUpdating>
         <OnUpdated>
              <FadeIn Duration="0.2" Fps="20" />
         </OnUpdated>
     </Animations>
</cc1:UpdatePanelAnimationExtender>

<asp:UpdatePanel ID="update2" runat="server" UpdateMode="Conditional">
  //--My Code goes in here
</asp:UpdatePanel>

<cc1:UpdatePanelAnimationExtender ID="updateAnimation2" runat="server" TargetControlID="update2">
     <Animations>
         <OnUpdating>
              <FadeOut Duration="0.2" Fps="20" />
         </OnUpdating>
         <OnUpdated>
              <FadeIn Duration="0.2" Fps="20" />
         </OnUpdated>
     </Animations>
</cc1:UpdatePanelAnimationExtender>

Answer 1

Set UpdateMode = Always to UpdatePanels and this will fix it.

Answer 2

UpdatePanelAnimationExtender javascript. .

<cc1:UpdatePanelAnimationExtender ID="upaStock" runat="server" TargetControlID="upStock">
<Animations> 
    <OnUpdating>
        <Sequence>
            <Parallel duration="0">
                <Condition ConditionScript="document.getElementById('ctl00_p1_hdfValidacion2').value == 'true';">
                    <ScriptAction Script="onUpdating('ctl00_p1_pnlPopup','dviStock','divCuerpo');" />
                </Condition>
            </Parallel>
        </Sequence>
    </OnUpdating>

    <OnUpdated>
        <Sequence>
            <Parallel duration="0">
                <ScriptAction Script="onUpdated('ctl00_p1_pnlPopup'); document.getElementById('ctl00_p1_hdfValidacion2').value = 'false';" />
            </Parallel>
        </Sequence>
    </OnUpdated>
</Animations>