CODEWITHSUNDEEP
javascriptphpajaxhtmlbrowser-history
dvtelles
dvtelles

Reputation: 200

AJAX POST Browser History

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)

Upvotes: 1

Views: 1813

Answers (2)

Thiago de Oliveira Cruz
Thiago de Oliveira Cruz

Reputation: 387

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 ;)

Upvotes: 3

rburk
rburk

Reputation: 101

You could look into using the fragment identifier (stuff after the # in a URL) to keep track of what "page" you're on, and this is what some frameworks do. Most browsers can listen for changes to that, and the browser history plays nice with it, so you can retrieve the value when it changes and take appropriate action.

Upvotes: 0

Related Questions