Updating the initial state(first loaded page before push another state)

[flashios09]

Hi, Thanks @balupton for this plugin. Sorry for my bad english :(

I tried History.js and it works for me, i can push new states and update the content when i use the back/forward browser button but i have a problem with the initial state.

First of all when the first page is called i replace the state, initialize it like this:

History.replaceState({state: initialDataToStore}, document.title, document.location.href);

When i click on a link, i push a state and i update the div#content using an ajax request like this:

$('body').on('click', '.js-nav',function(event) {
    var url = $(this).prop('href');
    History.pushState(state, 'title', url);
    loadContent(state, url);
    event.preventDefault();
});

When i use the back/forward button, the 'statechange' event is fired, so i call the loadContent function to update the div#content like this:

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

That's the loadContent function :

function loadContent(state, url){
    $.ajax({
        url: url,
        type: 'GET'
    })
    .done(function(data) {
        $('#content').empty().append(data);
    })
    .fail(function() {
        console.log("error");
    });
}

I have a problem with the first loaded page if it has already a previous element in the browser history like this:

1- new tab or another page
2- first loaded page (that i force the replaceState)
3- ...

If i go back to "new tab or another page" using the browser back button then i click on the forward button > "first loaded page", i lose all the html "layout"(html, scripts, head, body ...), only the ajax response will be displayed(content to append to div#content).

P.S: If i don't have a previous element "new tab or another page" on the history my "first loaded page" works correctly, i don't lose the Html layout .

What i have to do ?

Thanks