467,118 Members | 907 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,118 developers. It's quick & easy.

Hiding panel controls from Javascript

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
Nov 18 '05 #1
  • viewed: 16513
Share:
4 Replies
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.

-----Original Message-----
Hello group:

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

<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
.

Nov 18 '05 #2
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
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Nov 18 '05 #3
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.)

Nov 18 '05 #4
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[MSFT]" <v-******@online.microsoft.com> wrote in message
news:Mn**************@cpmsftngxa07.phx.gbl...
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.)

Nov 18 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Paul | last post: by
3 posts views Thread by Charlie Dison | last post: by
1 post views Thread by Doug | last post: by
6 posts views Thread by wandali@rogers.com | last post: by
22 posts views Thread by Mr Newbie | last post: by
2 posts views Thread by =?Utf-8?B?TUNN?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.