History API with jQuery - address bar changes but doesn't refresh divs

Question

I've been able to easily use the history.pushState to change the content of my div and have the address bar reflect a fake url. However, whenever I push the back/forward buttons the url changes back but the content remains the same. Typing in the url comes up with an error. It seems I have the first part of the history API down, but need help doing state changes.

I'm a fairly new programmer and trying to build my website in jQuery and keep the code as concise as possible.

HTML code:

<ul>
<li><button class="navButton" id="signUp" href="./content/registration.php" name="registration" title="Registration">Sign Up</button></li>
<li><button class="navButton" id="settings" href="./content/account_settings.php" name="settings" title="settings">Settings</button></li>
<li><button class="navButton" id="about" href="./content/about.php" name="about" title="About">About</button></li>
</ul>

<div id="mainContent"></div>

Javascript code:

$(document).ready(function() {
    // INITIAL CONTENT ON FIRST LOAD
$("#mainContent").load('./content/start.php');

// CODE FROM HISTORY.JS 
(function(window, undefined) {
var History = window.History; 
if (!History.enabled) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 
    History.log(State.data, State.title, State.url);
    });

    // EVENT LISTENER FOR NAVBUTTON CLASS TO REPLACE CONTENT IN MAINCONTENT DIV
$('.navButton').click(function(e) {
    e.preventDefault();
    pageurl = $(this).attr('name');
    $("#mainContent").fadeOut().load($(this).attr("href")).fadeIn();
    if (pageurl != window.location) {
        history.pushState('', $(this).attr('title'), $(this).attr('name'));
        }
    });

})(window);
});

I have installed history.js but if I don't need to use it, that would be preferred. I would love to have this code corrected so the back button refreshes and this works!

Answer 1

So I solved this by adding an if statement under the popstate to compare the url and determine the content loaded in the mainContent div. Works!.. but discovered my original pushstate is pushing several popstates the more you click the navButtons. That question is posted Cannot find where I have a popstate loop creating multiple history entries

window.addEventListener('popstate', function() {
    //WHEN BACK/FORWARD CLICKED CHECKS URL PATHNAME TO DETERMINE WHICH CONTENT TO PLACE IN DIV
    if (location.pathname == "/index.php") {
        $("#mainContent").load("./content/start.php");
    } else {
        $("#mainContent").load("./content" + location.pathname + ".php");
    }
});

Answer 2

Advice: use the built html5 history state, to pass in objects or params or so on...

Action when you are pushing a state into browser:

history.pushState('{url:location}', $(this).attr('title'), $(this).attr('name'));

Action when your clicked back or front using the browser:

$(window).on('popstate', function(e){
        if(e.originalEvent.state != null){
              console.log("url to render"+e.originalEvent.state.url)
            }else{
              console.log("nothing in the state, do nothing")
            }