How can I use getElementById for a control created in code behind?
I am trying to use the onmouseover
and onmouseout
event on a table td created on the client side, so that when the a user mouses over the table cell, a panel becomes visible, and when they mouse out, the panel becomes invisible.
<table>
<tr>
<td onmouseover="ToggleVisibility('FileHeader', true);" onmouseout="ToggleVisibility('FileHeader', false);">
Some content goes here.
</td>
</tr>
</table>
The onmouseover
and onmouseout
call the following JavaScript function, also defined on the client side.
<script language="javascript" type="text/javascript">
function ToggleVisibility(id, visible) {
var content = document.getElementById(id);
if (content !开发者_开发知识库= null) {
if (visible) {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
}
</script>
The "id" that I'm passing in to getElementByID
is the id for a Panel control created in code behind during Page_Load. The Panel is added to a different table that is defined on the client side like so:
<asp:Table ID="HelpTable" runat="server"></asp:Table>
Here is the panel created and added to the table in code behind:
TableRow row = new TableRow();
HelpTable.Rows.Add(row);
TableCell cell = new TableCell();
row.Cells.Add(cell);
Panel pFileHeader = new Panel();
pFileHeader.ID = "FileHeader";
pFileHeader.Style.Add("Display", "none");
cell.Controls.Add(pFileHeader);
(The panel, pFileHeader
contains actual content (labels with text, etc.) that I've left out for simplicity).
When this Panel is created on the client side, my ToggleVisibility
function works fine, but when the Panel is created in code behind, getElementById
returns null. I'm pretty new to JavaScript, and would appreciate any help.
Asp.net will automatically name mangle all of the id's of you runat=server objects. You can retrieve the mangled ID using the clientId property.
精彩评论