Make Panel visible using javascript...

Question

I have a Panel with property, Visible set to False

<asp:Panel ID="pnlUpload" runat="server" Visible="False" />

and i try to make it visible using javascript as code below

document.getElementById('<%= Panel1.ClientID %>').style.visibility = 'visible';

but it's not working, any idea guys?

Answer 1

I am answering this with zero ASP experience but a lot of JS/HTML/CSS experience so bear with me if I am completely wrong...

I would say that the Visible="False" tag is not equivalent to the CSS style="visibility:hidden;" therefore that JS call will have no effect.

Answer 2

Setting Visible="false" makes the panel not to render in the generated HTML. If you want to make it show/hide in the client side, you need to make it Visible="true" and use a CSS class/in the style attribute having "display" property with the value "block" or "none" as required.

Answer 3

Hi,

I answering with almost zero ASP experience, like Flash84x :-)

It seems that in asp, when you set "Visibile=false", the panel is not created.

And if you would like to use custom JavaScript and not the .NET facility to display, hide a panel you should apply a style directly in the tag like this:

<asp:Panel id="pnlUpload" runat="server"
  Style="visibility:hidden;background-color:#CC9999; 

color:#FFFFFF; width:200; height:200; border:solid 1; padding:10"> .....

And then it will rendere somthing like this in html :

<div id="pnlUpload" class="text" style="visibility:hidden;

background-color:#CC9999; color:#FFFFFF; width:200; height:200; border:solid 1; padding:10"> .....

</div>

And of course the corresponding javascript would be:

<script language="JavaScript">
document.getElementById('pnlUpload').style.visibility = 'visible';
</script>

Answer 4

Please put your panel in a div and change the style using the following way

<div>
<asp:Panel ID="pnlUpload" runat="server" Visible="False" />
</div>

javascript

function visible()
{
document.getElementById('<%=pnlUpload.ClientID %>').style.display = 'block'
}

Answer 5

I think you are confusing the server-side and client-side aspects of the code.

In your example, it is the Visible="False" that is causing your problem

<asp:Panel ID="pnlUpload" runat="server" Visible="False" />

the runat="server" part means that the control has server-side "state" (I won't go into Viewstate here but runat="server" effectively opts-in on viewstate).

Because it is a server-side control, the Visible="False" is executed on your webserver and means that the control is not even rendered and that means that no html gets sent to the browser.

You rather want the html to go to the browser, but have the browser not render it:

<asp:Panel ID="pnlUpload" runat="server" style="display:none" />

(there are better ways to do this with CSS, but this keeps it simple and should help make the point)

If you try that, your javascript code should work.