AJAX POST Browser History

Question

i'm having a very annoying problem that didn't figure out yet.

I'm developing a Web system using "Single Page Application Paradigm", but without any framework like angular, backbone, etc.

We load the page once and almost all other pages are load via ajax. The problem starts when we the user click on the Back button of Browser. Since there is no page reload, after the user login in the system, no url is changed and when the users try do use the back button from the browser, he's redirected to login page, cause it's the last page he "visited".

All the content is load via ajax post (not very proud of) and now we must support the back/foward button. I tryed using HTML5 History API but with no success. I was able to register the 'popstate' callback and tryed to simulate a post again. But there are fields in the page that i must restore. I'm not sure if i can find it but what i need is like to restore the page to the state before the request was sent, like a snapshot.

Can anyone give me a hand ?

Thanks! (I'm desperate :D)

Answer 1

Here is a simple example of how to do it:

var state = null;
$(document).ready(function($) {   
//this is my menu... I created a simple menu just for testing :)
    $('nav li').on('click', function(){
        var title = $(this).text().toLowerCase();
        loadPage(title);
        window.history.pushState(title, null, '#'+title);
    });


    window.addEventListener('popstate', function(event) {
        state = event.state;
        console.log("State: "+state);
        if(state != null && state != "null"){
            loadPage(state);
        }
    });
});

function loadPage(page) {
    $("#content").load(page+".html");
}

Cheers ;)