Managing controls in a web page was going smoothly until I decided to group them into an accordion. Unfortunately, this change made it impossible for the Javascript to update their state. Here is a brief 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 Accordion:
<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 am struggling to figure out why the Javascript cannot update despite printing out the correct ID in the alert. If passing "this" object works, I can disable individual buttons, but I need to handle multiple objects.
If you have any insights or ideas, please share!
Sample Code available at