Question

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.

Answer 1

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.