Hiding panel controls from Javascript

  • Thread starter Thread starter James
  • Start date Start date
J

James

Hello group:

I'm trying to hide a panel control in javascript when a print button
is clicked. On my web form, I have a button that fires a javascript
function called doPrint(). No matter how I attempt to write the line
to reference the panel control, I get a Null error or an Object does
not exist error. I know this can be done in asp.net, but I need the
event to fire at the client, otherwise the page will print before
firing the server-side code to hide the panel. Here is what I'm
attempting:

<script language="javascript">
function doPrint()
{
var a = document.myForm.pnlMyPanel
a.visible = false;
window.print();
a.visible = true;
}

</script>

What do I need to do?

Thanks,

James
 
Not sure if this is your problem but this has happened to
me before...if the panel is declared with visible="false"
in the html like this...

<html>
<body>
...
<asp:panel id="pnl" runat="server" visible="false" />
</body>
</html>

....javascript will not be able to reference it.
 
Thanks for the reply. The suggestion you offered does not apply in my
case; I only have the id, runat, and height properties set.

James
 
Hi James,


Thank you for using Microsoft Newsgroup Service. Based on your description,
you want to hidden a ASP.NET Panel server

control in the client javascript. Is my understanding correct?

If so, here is my suggestion on this issue:
Generally in ASP.NET most ServerControls have the Visible attribute which
can be set in server-side code to show/hide

them. However, you need to know that the ASP.NET servercontrols are not
really HTML element, when render into

browser, the ASP.NET will output them as the proper html element in terms
of the client's browser's capability. For

example, as for the Panel server control, such as
<asp:Panel id="pnlTest" runat="server">
In the Panel
</asp:Panel>

When you run the page and view its html source via the "View Source"
MenuItem, you will find that there is no "Panel"

element in the client html doucment, the "Panel" is represened by a "div"
like:
<div id="pnlTest">
In the Panel
</div>
We still can identify it via the "id", this will remain from serverside to
client.

Also, in clientside javascipt, you can manipulate the html element's
attribute via the DOM object. To show or hide an

element, you need to set its "display" attribute in its css style. Do
remember that no "Visible" attribute in html , it is

abstracted by the ASP.NET in serverside. And here is a simple page shows
how to hide the panel(div) via change its "

display" attribute in client side script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>ClientSide</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script language=javascript>
function doHide()
{
document.all("pnlTest").style.display = "none";
}
function doShow()
{
document.all("pnlTest").style.display = "inline";
}
</script>
</HEAD>
<body>
<form id="Form1" action="WebForm1.aspx" method="post" runat="server">
<table width="500" align="center" border="1">

<tr>
<td>
<asp:Panel id="pnlTest" runat="server">
<asp:TextBox id="TextBox1" runat="server"></asp

:TextBox>
<asp:Button id="Button1" runat="server" Text="

Button"></asp:Button>
<asp:Label id="Label1" runat="server">Label</asp

:Label>
</asp:Panel>
</td>
</tr>
<tr>
<td><input type=button id="btnHide" name="btnHide" value="Hide

Panel" onclick="doHide()" /></td>
<td><input type=button id="btnShow" name="btnShow" value="Show

Panel" onclick="doShow()" /></td>
</tr>
</table>
</form>
</body>
</HTML>


Please try out the preceding suggestion to see whether it helps. If you
have any questions on it, please feel free to let me know.


Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
 
Steven,

Thanks! That worked beautifully! I had already noticed the "div" tag you
mentioned, but I still wasn't sure how to reference it.

Thanks again,

--
James Lankford


Steven Cheng said:
Hi James,
Click to expand...


Thank you for using Microsoft Newsgroup Service. Based on your description,
you want to hidden a ASP.NET Panel server control in the client javascript.
Is my understanding correct? If so, here is my suggestion on this issue:

Generally in ASP.NET most ServerControls have the Visible attribute which
can be set in server-side code to show/hide them. However, you need to know
that the ASP.NET servercontrols are not really HTML element, when render
into browser, the ASP.NET will output them as the proper html element in
terms of the client's browser's capability. For example, as for the Panel
server control, such as <asp:Panel id="pnlTest" runat="server">
In the Panel </asp:Panel>

When you run the page and view its html source via the "View Source"
MenuItem, you will find that there is no "Panel" element in the client html
doucment, the "Panel" is represened by a "div" like:
<div id="pnlTest">
In the Panel
</div>
We still can identify it via the "id", this will remain from serverside to
client.

Also, in clientside javascipt, you can manipulate the html element's
attribute via the DOM object. To show or hide an element, you need to set
its "display" attribute in its css style. Do remember that no "Visible"
attribute in html , it is abstracted by the ASP.NET in serverside. And here
is a simple page shows how to hide the panel(div) via change its "display"
attribute in client side script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 
Back
Top