History.js - sometimes only shows ajax content when clicking back button

Question

I use History.js and sometimes when I click the back button I only get the content from the ajax call instead of the whole page (including the ajax call). This causes the site to look terrible as no scripts, css or html "container" is loaded.

1. I browse my page.
2. I type another site in the address bar.
3. I click the back button – now only the html from the previous ajax call is shown, no css, js or other html

Why is this occurring and how can I fix it?

My code looks like this:

History.Adapter.bind(window, 'statechange', function(){
    var State = History.getState();
    $.ajax({
        url: State.url,
        type: 'get',
        beforeSend: function(xhr){ 
            xhr.setRequestHeader('X-PJAX', true); 
        },
        success: function(resp, status, xhr) { 
            $('#wrapper').html(resp); 
        }
    });
});

Answer 1

I fixed it by disabling cache on my ajax response.

Cache-Control: no-cache, no-store, must-revalidate

Now when I click the back button the whole page is loaded instead of only the ajax response.