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);
});

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);
});

• javascript
• jquery
• history.js

2 Answers 2

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;
    });

You are correct when you say that you need to reload the data when the state changes, in that you will have to have the javascript undo the changes made or render the contents again from the original state.

This will probably better suit your agenda: https://github.com/thorsteinsson/jquery-routes

Edit:

You might also consider using backbone.js (http://backbonejs.org/) as it will help you create structure and abstract code in a way that makes it easier to understand what needs to be done.

Backbone comes with it's own url router and so called views.