Ajax .load refresh/back button

Question

I'm opening part of my pages in div with Ajax. But when i refresh or hit the back button it just doesnt do what it should. I read and tried a lot to get this to work but it just dont want to work. I'm at a point that when i hit the the refresh or back button my address bar give the right page, but my div doenst change (e.g. address bar says: /projects.php but the page/div is still on index.php)

I just want to use the back/forward buttons and when i refresh the page it has to stay at the same page and dont go back to the first mainpage.

Here is my code, hope someone have a solution:

Html - my menu

<div id="buttons">
<a class="menu" id="page1" href="#Home">Home</a><span>|</span>
<a class="menu" id="page2" href="#Projects">Projects</a><span>|</span>
<a class="menu" id="page3" href="#About">About</a><span>|</span>
<a class="menu" href="#Contact">Contact</a>
</div>

.load part

$(document).ready(function() {
$("#page1").click(function(){
$('#content').load('index.php #content');
});

$("#page2").click(function(){
$('#content').load('projecten.php #content');
});

$("#page3").click(function(){
$('#content').load('overons.php #content');
});
});

.haschange part

    $(function(){

  // These two properties, set after jQuery and the hashchange event plugin are
  // loaded, only need to be used when document.domain is set (to fix the "access
  // denied" error in IE6/7).
  $.fn.hashchange.src = '../../document-domain.html'; //--- I still dont know what to do with this, but i guess its only for IE6/7 ---//
  $.fn.hashchange.domain = document.domain;

  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;

    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';

    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#buttons a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();

});

Answer 1

When you only change the fragment the page doesn't reload or anything.

This is the thing with SPA (Single Page Applications) - they don't reload the page. Which is why e.g. Gmail maintains the page state even though the URL after the # (aka fragment) changes. Open a different folder and/or email and see that the URL fragment changes.

You'll need to listen to those events and do actions similar to your $('#pageN').click() handlers yourself. Also do something similar if a user opens http://yourserver/#page2 directly. And think about SEO if that is applicable to you.

See a similar question: javascript - Detecting Back Button/Hash Change in URL - Stack Overflow (do try to use the HTML5 API if you can),

See e.g. Intelligent State Handling · browserstate/history.js Wiki for some background info.

Or create completely separate pages where the URL path (before the # changes). Like in the good old days.