How do I inject another JSP page into a <div> when clicking a link?

Question

I have two different divisions in a JSP page. One contains a menu of links, when clicked the div2 (id-content) loads different pages accordingly. I am doing something like -

<div id="menu">
<ul class="navbar">
  <li><a name="login" href="Login.jsp" onclick="changeContent()">Login</a>
   </li></div>

and in the script I have something as -

<script language="JavaScript">
function changeContent() {
    document.getElementById('content').load('Login.jsp');
}
</script>

I also tried -

document.getElementById('content').innerHTML=
"<jsp:include page="Login.jsp">"; 

None of the ways worked. Please suggest how should I

Answer 1

Try jquery..

function changeContent() {
    $('#content').load('Login.jsp');
}

Answer 2

The solution is to use Ajax, which will asynchronously retrieve your page content that can be pasted in with the innerHTML method. See my answer to a similar question of how an Ajax call works and some introductory links.

As to why your examples in your answer don't work, in the first case there is no load() method on an Element object (unless you've defined one yourself and not shown it). In the second example, as one of the question comments says, there is probably something causing a syntax error in the javascript.

As an FYI, when there is a syntax error in some javascript in a web page, the current expression being parsed and the rest of the <script></script> block will be ignored. Since this is inside a function declaration, that function will never get defined. For instance, an embedded quote in the included page will end the string for the innerHTML assignment. Then the javascript parser will try to parse the remainder of the HTML causing a syntax error as the HTML will not be valid javascript.