Updating the initial state(first loaded page before push another state)
flashios09 opened this issue · comments
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