hi guys, i have one main page with two iframe elements, these two iframe elements is assigned same source file as follows :

mainpage.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
    <table>
        <tr>
            <td>
                <iframe id="leftPane" src="iframepage.htm" width="300" height="800"></iframe>
            </td>
            <td>
                <iframe id="rightPane" src="iframepage.htm" width="300" height="800"></iframe>
            </td>
        </tr>
    </table>
    <script>
     window.frames.leftPane.document.onclick = function()
   {
        window.frames.rightPane.document.getElementById(window.frames.leftPane.window.event.srcElement.id).click();
   }
    </script>
</body>
</html>

iframepage.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    function ExpandCollapseTable(titleRow)
    {
//        if(titleRow.parentNode.childNodes.length > 1)
//        {
//             if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
//             {
//                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
//                {
//                    titleRow.parentNode.childNodes[i].style.display = "none";
//                }
//             }
//             else
//             {
//                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
//                {
//                    titleRow.parentNode.childNodes[i].style.display = "block";
//                }
//             }
//        }
        alert(titleRow);
    }
    </script>
</head>
<body>
    <table border=1>
        <tr onclick="ExpandCollapseTable(this);" style="cursor:pointer;" id="someID">
        <td colspan=3>
        Table Header(click to expand-collapse)
        </td>
        </tr>
        <tr>
            <td style="width: 100px">
                1</td>
            <td style="width: 100px">
                2</td>
            <td style="width: 100px">
                3</td>
        </tr>
        <tr>
            <td style="width: 100px">
                4</td>
            <td style="width: 100px">
                5</td>
            <td style="width: 100px">
                6</td>
        </tr>
        <tr>
            <td style="width: 100px">
                7</td>
            <td style="width: 100px">
                8</td>
            <td style="width: 100px">
                9</td>
        </tr>
    </table>
<div id="something" onclick="ExpandCollapseTable('alert something');">deneme</div>
</body>
</html>

if you run this application you will see that there is a problem when you click on left hand side table's first row. if you click on the div element, however, there is no problem.
Do you have any idea?

i found it guys : the problem is when you try to click on a row, you first try on a cell, then that click event bubbles up to row and to the document, but since in the previous example the td element does not have any id assigned to it, the window.event.srcElement.id is empty, that is why browser gave an error. it tried to call the element having the same id on the right hand side pane, which is impossible because there is no id. i just cut and paste the onclick event from row to cell and it solved the problem.

here if i summarize what i want to say above : dont forget that you are first clicking a table cell before you click a row, it is almost impossible to directly click on a row since td elements are nested inside, as a good habit try to use cell events instead of rows.

here is the modified iframepage.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

    <script type="text/javascript">
    function ExpandCollapseTable(titleRow)
    {
        if(titleRow.parentNode.childNodes.length > 1)
        {
             if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
             {
                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
                {
                    titleRow.parentNode.childNodes[i].style.display = "none";
                }
             }
             else
             {
                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
                {
                    titleRow.parentNode.childNodes[i].style.display = "block";
                }
             }
        }
    }
    </script>

</head>
<body>
    <table border="1">
        <tr>
            <td colspan="3" onclick="ExpandCollapseTable(this.parentNode);" style="cursor: pointer;" id="someID">
                Table Header(click to expand-collapse)
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
                1</td>
            <td style="width: 100px">
                2</td>
            <td style="width: 100px">
                3</td>
        </tr>
        <tr>
            <td style="width: 100px">
                4</td>
            <td style="width: 100px">
                5</td>
            <td style="width: 100px">
                6</td>
        </tr>
        <tr>
            <td style="width: 100px">
                7</td>
            <td style="width: 100px">
                8</td>
            <td style="width: 100px">
                9</td>
        </tr>
    </table>
    <div id="something" onclick="ExpandCollapseTable('alert something');">
        deneme</div>
</body>
</html>

if you want to see this working example run the application from the mainpage.htm, do not directly run iframepage.htm

This question has already been answered. Start a new discussion instead.