html - Setting a panel to visible using javascript - Stack Overflow

admin管理员组

文章数量:1314320

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";
}

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";
}

• javascript
• html
• asp
• panel

Share Improve this question Follow edited May 19, 2013 at 13:49 intuitivepixel 23.3k33 gold badges5959 silver badges5151 bronze badges asked May 19, 2013 at 13:43 ArianuleArianule 9,0634545 gold badges122122 silver badges179179 bronze badges 2

• make sure your js code run only after document load – Anoop Commented May 19, 2013 at 13:45
• 1 Have you tried document.getElementById("<%=panNonAfricanCountries.ClientID%>")? Or adding ClientIDMode="Static" to the control? – nnnnnn Commented May 19, 2013 at 13:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The Visible="false" on an asp 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./en-us/library/system.web.ui.control.clientidmode.aspx)

本文标签： htmlSetting a panel to visible using javascriptStack Overflow