javascript - JQuery & history.js back button not working

Question

I'm using history.JS (latest) with Jquery (latest) to load and replace just a portion of a website, this is all working, currently I'm only trying to get it working in modern browsers so I'm not fiddling with the hash changes.

Everything seems to work, however when I click the back button on the browser (latest FF & Chrome) the page does not change (although the url and title do change). I've had a google and a look on here but I can't see what is happening.

Looking on stack overflow I found this page: Restoring content when clicking back button with History.js which seems to be asking a similar question. I've add the loaded contents of the #left_col (which is the div being replaced) to the state data, but I'm not really sure where to go from there, I know I need to reload that data when the state changes, but I can't see how.

var History = window.History; 
var origTitle = document.title;
if ( !History.enabled ) {
    return false;
}
    
History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState();     
    History.log(State.data, State.title, State.url);
});

$('.ajaxload').live("click", function() {
    History.pushState({state:1,leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));
    $('#left_col').load($(this).attr("rel"));
    return false;
});

I'd really appreciate any help!

update:

I managed to get the page to change on the user clicking back, but it doesn't load the right state (it seems to go two states back rather than one), the code I've added to the above code is:

window.addEventListener('popstate', function(event) {
    var State = History.getState(); 
    $('#left_col').html(State.data.leftcol);
});

Answer 1

It turns out I needed to update the page on statechange using History.js, not poState as I'd thought. below is my full (and working) code for anyone who may be having the same issue:

    var History = window.History;
    var origTitle = document.title;

    if ( !History.enabled ) { return false; }
    History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));           // save initial state to browser history

    function updateContent(data) {
        if(data == null) return;                    // check if null (can be triggered by Chrome on page load)
        $('#left_col').html(data);              // replace left col with new (or old from history) data
        History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));           // save this state to browser history
    }

    History.Adapter.bind(window,'statechange',function(){           // use this NOT popstate (history.JS)
        var State = History.getState();
        //History.log(State.data, State.title, State.url);
        updateContent(State.data.leftcol);                                          // call update content with data for left col from saved state
    });

    $('.ajaxload').live("click", function() {                                   // attach click event, get html and send it to updateContent
        $.get($(this).attr("rel"), updateContent);
        return false;
    });