CODEWITHSUNDEEP
javascriptajaxhtmljquery
Déjà Bond
Déjà Bond

Reputation: 301

history.pushState with back and forward buttons

I need to make back and forward buttons working with this ajax method
This code working good and the URL on browser changing as it should be
but when you click on back and forward buttons, nothing happening 

(function(){

    function clickNav(e){
        e.preventDefault();
        var href = $(this).attr('href');
        history.pushState(null, null, href);

        $.ajax({
            url: href,
            dataType: 'html',
            cache: false
        }).done(function(html){
            var $html = $(html);

            $('title').html($html.filter('title').text());
            $('#content').replaceWith($html.find('#content'));
            $('#nav').replaceWith($html.find('#nav'));

            $('#nav li a').on('click',clickNav);
        });

    }
    $('#nav li a').on('click',clickNav);

})();

Upvotes: 1

Views: 3964

Answers (2)

WalterEgo
WalterEgo

Reputation: 525

I had to deal with this today. The following works for me (tested on four browsers in Win 7 so far)...

//CHECK FOR ADDRESS BAR CHANGE EVERY 500ms
var wwcint = window.setInterval(function(){
    if(window.last_location_href == undefined) {
        window.last_location_href = document.location.href;
    } else if(window.last_location_href != document.location.href) {
        window.last_location_href = document.location.href;

        //DO WHATEVER YOU NEED TO DO TO LOAD THE CORRECT CONTENT
        someFunctionToLoadTheContent(document.location.href);
    }
}, 500);

Upvotes: 1

wm.p1us
wm.p1us

Reputation: 2059

it is because your history is empty. For this you need to use 

 history.pushState();

After that my buttons start working

Upvotes: 0

Related Questions