Кнопка JQuery & history.js не работает

Я использую history.JS(последний) с Jquery (последним), чтобы загрузить и заменить только часть веб-сайта, это все работает, в настоящее время я только пытаюсь заставить его работать в современных браузерах, m не возится с изменениями хэша.

Все работает, однако, когда я нажимаю кнопку "Назад" в браузере (последние FF и Chrome), страница не изменяется (хотя URL и название меняются). У меня был google и взгляд здесь, но я не вижу, что происходит.

Глядя на переполнение стека, я нашел эту страницу: Восстановление содержимого при нажатии кнопки с помощью History.js, который, похоже, задает аналогичный вопрос. Я добавляю загруженное содержимое #left_col (которое заменяется div) к данным состояния, но я не совсем уверен, куда идти оттуда, я знаю, что мне нужно перезагрузить эти данные при изменении состояния, но я не вижу, как.

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

Я очень благодарен за любую помощь!

обновление:

Мне удалось получить страницу для изменения пользователем, щелкнув его назад, но он не загружает правильное состояние (кажется, он переходит на два состояния, а не один), код, который я добавил к вышеуказанному коду,

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

Ответ 1

Оказывается, мне нужно обновить страницу смены состояния с помощью History.js, а не poState, как я думал. ниже мой полный (и рабочий) код для всех, кто может иметь одну и ту же проблему:

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

Ответ 2

Вы правы, когда говорите, что вам нужно перезагрузить данные при изменении состояния, поскольку вам придется отменить javascript внесенных изменений или снова отобразить содержимое из исходного состояния.

Это, вероятно, лучше соответствует вашей повестке дня: https://github.com/thorsteinsson/jquery-routes

Изменить:

Вы также можете использовать backbone.js(http://backbonejs.org/), так как это поможет вам создать структуру и абстрактный код таким образом, чтобы было легче понять, что нужно сделать.

Магистраль поставляется с собственным маршрутизатором url и так называемыми представлениями.