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 mod

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

Answer 2

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.