0

I'm working with the HTML5 History API and ajax to load partial page content whenever possible. I have most of this working correctly, however, there are some instances where a full page reload is required and this is where things seem to break.

I'm adding to the history using pushState:

history.pushState({ data: response }, '', href);

I've got an event listener on the popstate event that displays the correct content when navigating back:

window.addEventListener("popstate", function(e)
{
    if (e.state) {
        $('#content').html(e.state.data);
    }
});`

Everything works fine until I navigate to a URL that requires a full page reload (not loaded via ajax) and then use the browsers back button. The entire page is then replaced only with the previous ajax response.

Is there something I can do to render the page correctly in an instance like this? I realise I could return the entire html page on every ajax request but this seems wasteful when the majority of content won't be changing.

mcryan
  • 1,566
  • 10
  • 20
  • Take a look at this similar question http://stackoverflow.com/questions/28003911/how-to-restore-page-on-back-history/28004222#28004222 – bhspencer Jan 20 '15 at 00:56
  • I've been able to resolve my issue with this answer: http://stackoverflow.com/questions/11241263/html5-history-api-back-button-with-partial-page-loads – mcryan Mar 12 '15 at 20:46

0 Answers0