usercontrols inside accordion panes don't work

[dimaash]

Hi everyone,

I have the following problem: I have a web form which contains ajax accordion. Each accordion pane contains a usercontrol. Each usercontrol consists of several textboxes and 2 buttons. All the textboxes and 2 buttons (inside these usercontrols) are wrapped in the UpdatePanel. Following updatepanels is the UpdatePanelAnimationExtender for some animation whithin each usercontrol. Each UpdatePanelAnimationExtender has a different animation id from other usercontrols.

Basically when i only put one usercontrol in the accordion pane everythign works. I have my javascript to clear textboxes and the submit button does a postback to server. However, when i put 2 of these controls in 2 different panes only the last one works. Since the last one works i assume it is because it was last to be parsed on pageLoad. So how can i make it that when user clicks on the accordion pane, the usercontrol is ->?re-initialized?<- so that it could work.

Here is 1st UserControl: uctl1.ascx

<script language="javascript" type="text/javascript">
    function clearTextBoxes() {}
    function FadeOut() {}
    function fadeIn() {}
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
<ContentTemplate>
     <asp:Label id="lbl1" runat="server">
	    <asp:TextBox ID="txtBox_1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click"/>
            <asp:Button ID="Button2" runat="server" AutoPostBack="false" Text="Clear"  
            onclick="Button2_Click" OnClientClick="clearTextBoxes();"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1" BehaviorID="animation1" Enabled="true">
    <Animations>
        <OnUpdating>
            <Sequence>
                <StyleAction Attribute="overflow" Value="hidden" />                     
                        <Parallel duration="3" Fps="30">
                            <ScriptAction Script="FadeOut();" /> 
                        </Parallel>
            </Sequence>
      </OnUpdating>
      <OnUpdated>
            <Sequence>
                        <Parallel duration="3" Fps="30">
                            <ScriptAction Script="fadeIn();" /> 
                        </Parallel>
           </Sequence>
     </OnUpdated>
    </Animations>
</asp:UpdatePanelAnimationExtender>

Here is 2nd UserControl: uctl2.ascx

<script language="javascript" type="text/javascript">
    function clearTextBoxes() {}
    function FadeOut() {}
    function fadeIn() {}
</script>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
</Triggers>
<ContentTemplate>
     <asp:Label id="lbl1" runat="server">
	    <asp:TextBox ID="txtBox_1" runat="server"></asp:TextBox>
            <asp:Button ID="Button3" runat="server" Text="Submit" onclick="Button3_Click"/>
            <asp:Button ID="Button4" runat="server" AutoPostBack="false" Text="Clear"  
            onclick="Button4_Click" OnClientClick="clearTextBoxes();"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender2" runat="server" TargetControlID="UpdatePanel2" BehaviorID="animation2" Enabled="true">
    <Animations>
        <OnUpdating>
            <Sequence>
                <StyleAction Attribute="overflow" Value="hidden" />                     
                        <Parallel duration="3" Fps="30">
                            <ScriptAction Script="FadeOut();" /> 
                        </Parallel>
            </Sequence>
      </OnUpdating>
      <OnUpdated>
            <Sequence>
                        <Parallel duration="3" Fps="30">
                            <ScriptAction Script="fadeIn();" /> 
                        </Parallel>
           </Sequence>
     </OnUpdated>
    </Animations>
</asp:UpdatePanelAnimationExtender>

As you can see each usercontrol uses a different updatepanelid and different UpdatePanelAnimationExtender id, and different button ids.

Here is the web page page.aspx which contains the accordion:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="Page.aspx.cs" Inherits="WebApp1.Page" Theme="Default"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register TagPrefix="ucl" TagName="uctl1" Src="~/UserControls/uctl1.ascx"%>
<%@ Register TagPrefix="ucl" TagName="uctl2" Src="~/UserControls/uctl2.ascx"%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
</script> </style>

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
           <asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0">
               <Panes>
                    <asp:AccordionPane ID="AccordionPane1" runat="server" >
                         <Header>Uctl1</Header>
                         <Content><ucl:uctl1 ID="usercontrol1" runat="server"/></Content>
                    </asp:AccordionPane>
                    <asp:AccordionPane ID="AccordionPane2" runat="server">
                          <Header>Uctl2</Header>
                          <Content><ucl:uctl2 ID="usercontrol2" runat="server"/></Content>
                    </asp:AccordionPane>
                </Panes>
            </asp:Accordion>
</asp:Content>

So idea is when i click on pane and fill up the information in textboxes i click on submit and usercontrol should postback to server for processing.
If i click on clear, javascript will clear textboxes. Then if i click on 2nd pane, it opens up 2nd user control. And again, after i fill up textbox and
press submit it should postback to server for processing. Like i said in the beginning, each user controls works just fine when it is only one in the accordion.
But when i add 2 of them, only the last one works: in my case utcl2.ascx

Please Help!
Thx.