Hash Navgation w/ Ajax loads

Question

I have a page which loads a DIV with different content when I click a link.

function getAjax(myID,file,room){
    room = typeof room !== 'undefined' ? room : 0;
    var myResult;
    var raNum = Math.floor((Math.random() * 100) + 1);
    $.ajax({
        type: "POST",
        cache: false,
        async: false,
        url: '<?php echo PATH;?>ajax/'+file+'.php?num='+raNum+'&lang=<?php echo $_SESSION['lang'];?>',
        data: {"id": myID, "room": room},
        success: function(data){
            window.location.hash = "TEST";
            if ($('.infowin').css('visibility') === 'visible' && file != 'infowin') {
                $('.infowin').hide();
                $('.hName').html('<?php echo RN_FE_TOP_INFOWIN_LOAD;?>...').removeClass('green').removeClass('orange');
                $('.infoWinContent').html('');
                $('.awards').html('');
            }
            myResult = data;
        },
        error: function(data, errorThrown){
            console.log('request failed :'+errorThrown);
        }
    });
    return myResult;
  }

The Link:

$('.mReservation').on('click', function(e){
        var raNum = Math.floor((Math.random() * 10000) + 1);
        e.preventDefault();
        var hotel_id = "0";
        var getPage = getAjax(hotel_id,"cancel");
        $("#all-content").html(getPage).css("overflow-y","auto");
    });

When I hit the BACK button of the browser it will always go to the previous page. Is there any way to have the back button "undo" the last jquery ajax call? I read something about #hashnavigation so I added this on ajax' success function:

window.location.hash = "TEST";

It will add a #TEST to the URL, but it hitting BACK now only results in removing the hash. Is there any way to achieve that in jquery?

Answer 1

The History API has functions that allow you to manipulate browsing history on your site. Hash routes are a way of managing site content without refreshing the page. When the url hash updates, new content is loaded onto the page. There are libraries to handle this and they make use of the History API. Some libraries you can look into are described here.