title: HTML5 History API just full load from index page
body: <p>im trying to implement in a Java MVC (using Vraptor) the history api, </p>
  
  <p>if you click in a link from /index, it will load the content in the #content div (its ok)</p>
  
  <p>but when you type /content1 and press enter in the url bar, it only display the content1, without the menu</p>
  
  <p>this pages is only for test, in a real env i will use a .js file:</p>
  
  <p>index.jsp(access from /index)</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
  &lt;div id="menu"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $("#menu").load("${pageContext.request.contextPath}/menu");       
  &lt;/script&gt;
  
  &lt;script&gt;
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>menu.jsp (can be accessed by /menu)</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="${pageContext.request.contextPath}/content1"&gt; Link 1&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="${pageContext.request.contextPath}/content2"&gt; Link 2&lt;/a&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
  
  $('a').click(function() {
  
      pageurl = $(this).attr('href');
       $.ajax({
          url: $(this).attr('href'),
          dataType: "html",
         // beforeSend: function(xhr){
           //   xhr.setRequestHeader('X-PJAX', 'true')
          //},
          success: function(response, status, xhr){
              $('#content').empty().append(response);
              history.pushState({path:pageurl},'',pageurl)
          }       
      });
  
      return false;
      });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the content1(can be accessed by /content1)</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  content1
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the content2.jsp (accessed by /content2)</p>
  
  <p>its the same of content1, i just changed the 1 by 2)</p>
  
  <p>how can i make when i load by writing in the url bar /content1 or /content2, and pressing enter, it load the /menu too? (full site, link from index, but in the page of the content1) if i write content2, load menu but displaying content2 in the #content?</p>