Question

I have a menu that loads a new html file in a div. The loading is done by a click event attached to the menu’s <a> tags. The loading works well and I add the new load to the history by constructing a new href with a hash tag.

But when I use the back button, the URL is updated correct in the browsers address field, but the page is never loaded. If I focus the address field and press enter it loads.

This is the javascript located in the mypage.html header.

<script type="text/javascript">
  $(document).ready(function() {

    // replace menu link click
    $(".right-menu a").live('click', function(ev) {
      ev.preventDefault();
      ev.stopPropagation();
      window.location.href = $(this).attr('href');
      $("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
      return false;
    });

    // If page loads, load the content area according to the hash.
    var hrtag = window.location.hash.substring(1);
    if(hrtag=="")
      hrtag='about';
    $("#content-right").load('mypage'+hrtag+'.html');
    window.location.hash = hrtag;
  });
</script>

This is the menu

<ul class="right-menu">
  <li><a href="mypage.html#about">About</a></li>
  <li><a href="mypage.html#screens">Screens</a></li>
  <li><a href="mypage.html#license">License</a></li>
  <li><a href="mypage.html#download">Download</a></li>
  <li><a href="mypage.html#donate">Donate</a></li>
</ul>

If I load the page as mypage.html, the javascript will append the hash #about and load the div id "content-right" with mypageabout.html

If I click the menu, for example download, it will load the div id "content-right" with mypagedownload.html

In both cases, the window.location will be set to the hash version of the page, mypage.html#about and mypage.html#download to register them in the history.

If i click the menu in the following order; license, about, screens and then click the browser’s back button, the address field will show; mypage.html#about, mypage.html#license but it will NOT load the pages!?!

The URLs are obviously in the history, but they don’t load.
Any clue to what might be wrong here?

// Thanks

EDIT – The solution

Thanks to Andres Gallo’s article I came up with this solution:

<script type="text/javascript">
  $(document).ready(function() {

    // Make sure the page always load #about
    LoadIDWithURL('#content-right','myPageAbout.html');

    window.addEventListener('hashchange',function() {

      if (window.location.hash != "") {
        // We have a hash, use it!
        LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
      } else {
        // We do not have a hash, force page reload!
        window.history.go(0);
      }

    });

  });

  // Load the targetID with the URL loadURL.
  function LoadIDWithURL(targetID,loadURL) {
    $(targetID).load(loadURL);
  }
</script>

Answer 1

I wrote a very detailed article on this exact topic. It explains how to build exactly what you are trying to do.

Furthermore my article also explains how you can pass parameters in your links to have javascript do special things

Here is a link to the article http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

The best method is to attach your functionality to your hashchanges rather than to you click events. This allows any changes in history to take advantage of your javascript functionalities.