.net Accordian Causing me Problems

Question

I had a bunch of controls that I displayed, hid, enabled and disabled based on actions in the web page. Everything worked until i put them into an accordian. Now I can't get the Javascript to be able to update their state. I have a small example

this is the Javascript

 <script type="text/javascript">
  var ctrl = document.getElementById('<%= btmRocp.ClientID %>');

    function ShowPanel(control)
{
    alert('<%= btmRocp.ClientID %>');
    ctrl.disabled = true;
}
</script>

This is the Accordian

 <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <cc1:Accordion  ID="MyAccordion"
                        runat="Server"
                        SelectedIndex="0"                      
                       >
         <Panes>
            <cc1:AccordionPane ID="accordianPane0" runat=server>
            <Header>Create New Report </Header>
            <Content>a
            <asp:Button ID="Button1"  onmouseup="ShowPanel('') " runat="server" Text="Button" />            
            <asp:Button ID="btmRocp" runat="server" Text="Button" />
            </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="accordianPane1"  runat=server>
            <Header>Create New Report </Header>
            <Content>b</Content>
            </cc1:AccordionPane> 
            </Panes>

        </cc1:Accordion>

I would love to know what i am doing wrong here the Alert prints out the right ID.

If i do something where i pass the "this" Object to the function i can disable that button but I truly need it to disable, or hide like 10 objects

Does anyone have an idea?

Sample Code at http://www.riconllc.com/accordian.zip

Answer 1

What is the default state of the Accordion? collapsed? I have no idea how the Accordion works, but I'm suspecting that it is modifying the HTML DOM such that when the page first loads "btmRocp" is not actually present on the page itself, until it becomes "visible". That is, it might be injecting controls into and out of the page, based on the accordion status.

Your best bet in figuring out this behavior is to insert "debugger;" statements into your page at appropriate points, to inspect the live DOM at those points in time.

<textbox id="debugbox" onblur="this.value = eval(this.value);"></textbox>

Is a good way to monkey with script on your page as well.