usercontrols inside accordion panes don't work

 
0
 

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.

 
0
 

You are adding same named JavaScript methods in both .ascx.

 
0
 

I dont think it has to do with this particular javascript animations. Oh, i have failed to mention but clearTextBoxes() javascript works in both usercontrols. I.E. in pane 1 i click clear button, it clears pane's 1 textboxes only (pane 2 is not affected) Samething for pane 2, i click clear and its textboxes are cleared (pane 1 doesn't loose anything). My problem is really related to submit buttons and its event handler and wiring. In my case pane 2 (or last pane) is always seem to be active and it reacts on submit button.

I have added the following javascript to page.aspx to activate a pane upon mouse click:

<%@ 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">
function activatePane(index)
{
   var behavior=$get("<%=Accordion1.ClientID%>").AccordionBehavior;
   behavior.set_SelectedIndex(index);
}

</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><a href="" class="accordionLink" onmouseover="activatePane('0')">Uctl1</a></Header>
                         <Content><ucl:uctl1 ID="usercontrol1" runat="server"/></Content>
                    </asp:AccordionPane>
                    <asp:AccordionPane ID="AccordionPane2" runat="server">
                          <Header><a href="" class="accordionLink" onmouseover="activatePane('1')">Uctl2</a></Header>
                          <Content><ucl:uctl2 ID="usercontrol2" runat="server"/></Content>
                    </asp:AccordionPane>
                </Panes>
            </asp:Accordion>
</asp:Content>

With this javascript function both usercontrols work. But only after i open 2nd pane and actually fill up textboxes and press submit. After i press submit it posts back to server and after that usercontrol1 in pane 1 starts working.
So initially it seems usercontrol's submit button is not wired eventhough it is the pane that's selected by default in accordion configuration.

 
0
 

I am having this same issue. All my scripts work just fine and to the particular form fields, only the first submit button works for me. Did you ever figure out how to get around this?

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article