Change visibility of ASP.NET label with JavaScript

Question

I have a ASP.NET page with an asp:button that is not visible. I can't turn it visible with JavaScript because it is not rendered to the page.

What can I do to resolve this?

Answer 1

If you need to manipulate it on the client side, you can't use the Visible property on the server side. Instead, set its CSS display style to "none". For example:

<asp:Label runat="server" id="Label1" style="display: none;" /> 

Then, you could make it visible on the client side with:

document.getElementById('Label1').style.display = 'inherit'; 

You could make it hidden again with:

document.getElementById('Label1').style.display = 'none'; 

Keep in mind that there may be issues with the ClientID being more complex than "Label1" in practice. You'll need to use the ClientID with getElementById, not the server side ID, if they differ.

Answer 2

Try this.

<asp:Button id="myButton" runat="server" style="display:none" Text="Click Me" />  <script type="text/javascript">     function ShowButton() {         var buttonID = '<%= myButton.ClientID %>';         var button = document.getElementById(buttonID);         if(button) { button.style.display = 'inherit'; }     } </script> 

Don't use server-side code to do this because that would require a postback. Instead of using Visibility="false", you can just set a CSS property that hides the button. Then, in javascript, switch that property back whenever you want to show the button again.

The ClientID is used because it can be different from the server ID if the button is inside a Naming Container control. These include Panels of various sorts.