Implementation of a dynamic section in a JSP page

Question

I have one Spring MVC project, where the first page after the login is the following (each one of the links below are mapped by DispatcherServlet):

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HorarioLivre</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

  <link rel="stylesheet" href="css/style-main.css">
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <header>
    <div class="container">
      <h1><a href="index.html">HorarioLivre</a></h1>
      <nav>
        <ul>
          <li><a href="listagem_evento.html" rel="gb_page_fs[]" class="icon evento">Eventos</a></li>
          <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li>
          <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li>
          <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li>
          <li><a href="#">${usuario.nome}</a>
            <ul class="submenu">
                <li><a href="usuario_perfil.html" class="icon perfil">Perfil</a></li>
                <li><a href="usuario_config.html" class="icon settings">Configura&ccedil;&otilde;es</a></li>
                <li><a href="usuario_logoff.html" class="icon logout">Sair</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="about">

  </section>
</body>
</html>

My question is: Is there any way to display the content of the pages linked from this page (in the section identified by 'class=container', in the other section identified by 'class=about', using javascript? I want with this load the content without need load the entire page.

UPDATE 1

Following the example from here, I did three changes in my code. The links in the div 'container' was changed to:

<a href="#" onclick="loadpage('listagem_evento.html')" class="icon evento">

Add the id to the tag:

<section class="about">
    <div id="result">

    </div>
  </section>

And I add this Javascript code:

<script>
    function httpGet(theUrl)
    {
      if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      }
      else
      {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
              createDiv(xmlhttp.responseText);
          }
      }
      xmlhttp.open("GET", theUrl, false);
      xmlhttp.send();    
    }

    function createDiv(responsetext)
    {
        var _body = document.getElementsById('result');
        _body.innerHTML = responsetext;
    }

    function loadpage(url)
    {
        var result = httpGet(url);
        createDiv(result);
    }
  </script>

But now when I click in the link, nothing happens. What I made wrong?

You can write seperate html or jsp file having those content and make an ajax call get the whole html content as "text/html" and place the content in the appropriate div. with javascript. — Ravi Kumar, Feb 27 '14 at 04:33
I did an update on my code, but without solve the issue. Can you see anything I made wrong? — Kleber Mota, Feb 27 '14 at 11:23
Can you see in your browser console like firebug is there any error you are getting??? — Ravi Kumar, Feb 27 '14 at 11:27
remove createDiv(result); line from loadPage function. your loadpage function should look like - function loadpage(url) { var result = httpGet(url); } — Ravi Kumar, Feb 27 '14 at 11:46
And one more problem its document.getElemntById() not document.getElementsById() — Ravi Kumar, Feb 27 '14 at 12:49

score 0 · Answer 1 · answered Feb 27 '14 at 23:36

Ok, I solve this problem. I use the following solution (using jquery):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HorarioLivre</title>

  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
     $(function() {
            $('a').click(function() {
                $('#divpage').load($(this).attr('href'));
                return false;
            });
        });
    </script>

  <link rel="stylesheet" href="css/style-main.css">
</head>
<body>
  <header>
    <div class="container">
      <h1><a href="index.html">HorarioLivre</a></h1>
      <nav>
        <ul>
          <li><a href="listagem_evento.html" class="icon evento">Eventos</a></li>
          <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li>
          <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li>
          <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li>
          <li><a href="#">${usuario.nome}</a>
            <ul>
                <li><a href="usuario_perfil.html" id="perfil" class="icon perfil">Perfil</a></li>
                <li><a href="usuario_config.html" id="settings" class="icon settings">Configura&ccedil;&otilde;es</a></li>
                <li><a href="usuario_logoff.html" id="logout" class="icon logout">Sair</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="divpage">Content is coming!</div>
</body>
</html>

Implementation of a dynamic section in a JSP page

1 Answers1