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.
