How to include a page in a table by clicking a category in a menu (or in another table)?

Question

I have following 2 tables and a script having a function includePage(). Table with id=1 contains a menu whereas table with id2 is empty. It just contain one cell.

Now i want that when a user click on the first option in the menu of table having id=1, a dummypage1.html may appear in the table having id=2. Similary when she clicks on the second option of menu of table having id=1, a dummypage2.html may appear in the table having id=2.

How exactly can i tell the browser with the help of script to include the pages in table having id=2? Please help.

<table id="1">
 <tr>
    <td id="choice1" onclick="loadPage()">Initialize Session</td></tr>
    <td id="choice2" onclick="loadPage()">Sessions Information</td></tr>  
 </tr>

<table id="2">

<script language="javascript">

    function loadPage(){
     //if (document.getElementById('choice1')
     //  {
     //   <iframe src="sessionInformationTable.html" width="727px" height="416px"></iframe>
     //  }
    }

    </script>

Answer 1

If you are sure about following methodology

CLICK ON TABLE1 --> ROW1 --> displays --> Page1.html in TABLE-A
CLICK ON TABLE1 --> ROW2 --> displays --> Page2.html in table-B

this kind of designing leads to more tables when the age increases.

Better use this kind of style..

CLICK ON TABLE1 --> ROW1 --> displays --> Page1.html in TABLE-A
CLICK ON TABLE1 --> ROW2 --> displays --> Page2.html in TABLE-A

The thing is place an IFRAME inside the TABLE-A, and when clicking the ROW1 or ROW2 or ROW-n set thet page target to that iframe.

<table>
        <tr>
            <td>
                <a href="http://www.google.com" target="myplace">Page1</a></td>
            <td>
                <a href="http://www.yahoo.com" target="myplace">Page2</a></td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <iframe style="width: 400px; height: 400px;" id="myplace" name="myplace"></iframe>
            </td>
        </tr>
    </table>

Answer 2

Another approach is to make a AJAX call to request the content, and place it in the table setting a innerHTML property.

For AJAX calls you can use a variety of libraries, I personally recommend jquery and dojotoolkit.

Answer 3

You can pass a parameter on loadPage function

<td id="choice1" onclick="loadPage(1)">Initialize Session</td></tr>
<td id="choice2" onclick="loadPage(2)">Sessions Information</td></tr>  

<table id="2">
    <tr><td id="TD"></td></tr>
</table>
 <script>
   function loadPage(whatPage) {
        var url = (whatPage==1) ? "initSession.html" : "infoSession.html";
        document.getElementById('TD').innerHTML = '<iframe src="'+url+'" width="727px" height="416px"></iframe>';
   }
</script>

OR

<table id="2"><tr><td><iframe src="about:blank" id="content" style='width:100%;height:100%;"/></td></tr></table>

then on the javascript:

function loadPage(whatPage) {
   document.getElementById('content').src =  (whatPage==1) ? "initSession.html" :   "infoSession.html";
 }

Answer 4

With jQuery:

<table id="1">
 <tr>
    <td id="choice1">Initialize Session</td></tr>
    <td id="choice2">Sessions Information</td></tr>  
 </tr>

<table id="2">
    <tr><td></td></tr>
</table>

...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
<script language="javascript">
    $(function() {
        $("#choice1,#choice2").click(loadPage);
    });

    function loadPage(){
        var id = $(this).attr("id");
        if(id === "choice1") {
            $("#2 td").load("initSession.html");
        } else if (id === "choice2") {
            $("#2 td").load("infoSession.html");
        }
    }
    </script>