How can I make a <asp:Panel> visible using javascript?
I have done the following but get an error (Cannot Read property style of null)
<asp:Panel runat="server" id="panNonAfricanCountries" Visible="false">
var panNonAfricaDropDown = document.getElementById("panNonAfricanCountries")
if (dropDownFirst == "Yes") {
panNonAfricaDropDown.style.visibility = "visible";
}
The Visible="false" on an asp.net control have as result to not render the control on the page.
What you try to do here is to render it, but with css style to have it hidden from the user until using javascript show it. To archive that do not use the Visible, but set a style or a css to your Panel.
<asp:Panel ID="PanelId" runat="server" Visible="true" style="visibility:hidden" >
Some Content here...
</asp:Panel>
The asp.Panel is render as div and your html on the page will probably as:
<div id="PanelId" style="visibility:hidden">
Some Content here...
</div>
and I say probably because we do not know for sure how the Id is rendered. To get it we use the PanelId.ClientID and your final javascript code will be:
var panNonAfricaDropDown = document.getElementById("<%=PanelId.ClientID%>");
if (dropDownFirst == "Yes" && panNonAfricaDropDown) {
panNonAfricaDropDown.style.visibility = "visible";
}
ASP.NET mangles the names of elements that run on the server. You will have to find the mangled name and then do document.getElementById on that name.
Alternatively, you can use the ClientIDMode property of asp:panel to turn off the mangling (http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx)
document.getElementById("<%=panNonAfricanCountries.ClientID%>")? Or addingClientIDMode="Static"to the control?