History.js How to prevent double click back on reloaded page?

Question

I found the way to restore previous page when click back from this link. JQuery & history.js back button not working

But when i reload on ajax target page, the initial state set initial state again and i cannot click back button once to go back.

Step by step test:

1. on Home page
2. click on Page 1 to work with ajax pages.
3. click on ajax links (page 2 - 4)
4. javascript ajax request target page and display correctly.
5. hit reload/refresh button
6. click back ........ nothing happen. You are on the same page.
7. click back again. Now you are on the page 1 which is correctly but have to click back twice.

How to prevent history.js from double click on back to go back? (it should click once.)

If you do not understand how it works or want to see code, please download my pages & code. http://www.megafileupload.com/en/file/513749/ajax-history-js-zip.html
For see some part of page & code: look at this JSFiddle.

function ajaxPushUrl(thisobj) {
    if ($('body').find('.ajax-content-column').length != 0) {
        // current page has certain class.
        var thisurl = thisobj.attr('href');

        History.pushState({ajaxContentColumn:$('.ajax-content-column').html()}, thisobj.text(), thisurl);

        return false;
    }
}


function updatePage(data, url) {
    if ($('body').find('.ajax-content-column').length == 0) {
        // has NO certain class, use normal page request.
        window.location.href=url;

        return true;
    }

    if (url.toLowerCase().indexOf('page') >= 0) {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function(data) {
                $('.ajax-content-column').html(data);

                return false;
            }
        });
    } else {
        $('.ajax-content-column').html(data.ajaxContentColumn);
    }
}


$(function() {
    if ($('body').find('.ajax-content-column').length != 0) {
        // current page has certain class.
        if (History.enabled) {
            State = History.getState();

            // from pushState below, when you are on ajax requested page and reload page, it must double back click to go back.
            History.pushState({ajaxContentColumn:$('.ajax-content-column').html()}, $('title').text(), State.url);
        }

        // on state change, call update page js function.
        History.Adapter.bind(window,'statechange',function(){
            var State = History.getState();
            updatePage(State.data, State.url);
        });
    }
});

Answer 1

You my solve the problem in two approach:

Approach 1:

Modify part of your code as

$(function() {
    History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        updatePage(State.data, State.url);
    });
});

Instead of

$(function() {
    if ($('body').find('.ajax-content-column').length != 0) {
        // current page has certain class.
        if (History.enabled) {
            State = History.getState();

            // from pushState below, when you are on ajax requested page and reload page, it must double back click to go back.
            History.pushState({ajaxContentColumn:$('.ajax-content-column').html()}, $('title').text(), State.url);
        }

        // on state change, call update page js function.
        History.Adapter.bind(window,'statechange',function(){
            var State = History.getState();
            updatePage(State.data, State.url);
        });
    }
});

Update : update your ajaxPushUrl function to update only if we are not on same page.

function ajaxPushUrl(thisobj) {
    if ($('body').find('.ajax-content-column').length != 0) {
        // current page has certain class.
        var thisurl = thisobj.attr('href');

        if(window.location.href.split('/').pop() != thisurl) { //update only we are not on same page
            History.pushState({ajaxContentColumn:$('.ajax-content-column').html()}, thisobj.text(), thisurl);
        }

        return false;
    }
}

In this approach, an ajax request get called when you click an ajax link or go through history.

Approach 2:

$(function() {
    var clicked = false;

    function updatePage(data, url) {
        if ($('body').find('.ajax-content-column').length == 0) {
            // has NO certain class, use normal page request.
            window.location.href=url;
        }

        if(typeof data.ajaxContentColumn != 'undefined') {
            $('.ajax-content-column').html(data.ajaxContentColumn);
            return false;
        }

        fetchContent(url);
    }

    function fetchContent(url) {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function (data) {
                $('.ajax-content-column').html(data);
                clicked = true;
                History.pushState({ajaxContentColumn: $('.ajax-content-column').html()}, '', url);
            }
        });
    }

    $(".ajax-link").click(function(e) {
        if($('body').find('.ajax-content-column').length == 0) {
            return true;
        }

        e.preventDefault();

        var url = $(this).attr('href');

        fetchContent(url);
    });

    History.Adapter.bind(window,'statechange',function(){

        if(clicked) {
            clicked = false;
            return;
        }
        var State = History.getState();
        updatePage(State.data, State.url);
    });
});

and remove onclick=\"return ajaxPushUrl($(this));\" from your links.

In this approach, you can save some ajax request when go through history. content loaded from browser cache.

Enjoy!!