How make a column of table to show jsp dynamically according to request?

Question

I have an index.jsp page like,

<%@ include file="header.jsp" %>

<table id="" width="100%" height="100%">
    <tr>
        <td align="left" width="30%">
            <table>
                <tr><td><a href="EmployeePage.jsp">Register employee</a></td></tr>
                <tr><td><a href="empSearch.jsp">Search employee</a></td></tr>
                <tr><td><a href="empDelete.jsp">Delete employee</a></td></tr>
            </table>
        </td>
        <td align="left" width="70%">
            <%@ include file="EmployeePage.jsp" %>
        </td>
    </tr>
</table>
<%@ include file="Footer.jsp" %>

i have all the pages for those 3 functions for employees.

Now i just want to know can i load the pages into the tothe rightmost td,(where i had given as <%@ include file="EmployeePage.jsp" %> now).. as the user clicks the links in that left td(register, search and delete),i want that corresponding page to be loaded in the rightmost td..

IE.. i want all the contents in my index page static except that right most td to be dynamic.

What i exactly want is to make my page like this page

i am new bee to jsp.. so sample codes will be appreciable..

Answer 1

I could think of 2 approaches :

1. You can use iFrames.
2. You don't use anchor element , instead show and hide different pages using jquery or javascript and some ajax hit if required.

both of them have ample examples if you just Google.

Answer 2

This sample jQuery code should help you

<a href="#" onclick="loadjsp()">Register employee</a>
<div id="divId"></div>

function loadjsp(){
    $.ajaxSetup ({
        cache: false
    });
    $("#divId").load("EmployeePage.jsp");   
}

When you click on Register employee, the loadjsp() function will be called which will load your jsp.