Preserve dynamically changed HTML on back button

Question

It\'s amazing, I constantly see this working in other sites but never in sites that I\'m working on.

I\'m bringing in new content with ajax, I know about history.js

Answer 1

You can achieve your goal using History.js like this:

function manageHistory(data){

    var History = window.History;
    if ( !History.enabled ) { return false; }        
    History.replaceState({myData: data}, null);
}

$('select.select').change(function(e) { // I am using select tag here to give an example of an HTML action triggerer

    e.preventDefault(); 

    // get data from your select tag

    manageHistory( data)


});

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState();

    // Launch the ajax call and update DOM using State.data.myData
});

According documentation about History on Mozilla site, the PushState third parameter is:

URL — ....... This parameter is optional; if it isn't specified, it's set to the document's current URL.