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?
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.
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.
In order to display asp controls you need to use the property
ClientVisible
Example:
<asp:Panel ID="someId" runat="server" ClientInstanceName="someIdClient" ClientVisible="False" />
As mentioned in a previous post the attribute
Visible="False"
leads to not rendering the control.
In order to access the hidden control via Javascript you simply type:
function myFunction(){ someIdClient.SetVisible(true)
I tried .style.visibility = 'visible' and visible="true" and .style.display = 'block' and .style.display = 'inline' all those thing does not work. but if you write .style.display = 'none' it work. any body know the solution Please let me know Thanks
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>
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'
}
don't use visibility use this..
document.getElementById("<%=myPanel.ClientID%>").style.display = "none"; //not visible
document.getElementById("<%=myPanel.ClientID%>").style.display = "inline"; //visible