jquery ajax post call, ajaxify history and back button

Question

I have ajax calls made in jquery function which i call with onClick options placed on divs. example:

<div class='basic' onClick='example( <?php echo numberIwant ?> )'> example </div>

and the functions than looks like this:

function example(ID){
    $.ajax({
        type: "POST",
        url: "example.php",
        data: "ID="+ID, success: function(msg){$("#main").html(msg);}
    });
}

Now I want to make browser back button to work, to open the previous page(ajax content). I googled and tried multiple scrips like ajaxify and history.js and so on but I just cannot get it working.

I don't know if I either don't know how to use ajaxify properly or if it just doesent work with this kind of method..

Can anyone help me?

Solution

Using the backbutton w/ AJAX has historically been a very common problem. Luckily, with HTML5 came history.pushState which sort of allows you to manually manipulate what the browser does during a navigation (e.g., backbutton).

Some good resources on this:

http://diveintohtml5.info/history.html

http://adhockery.blogspot.com/2011/02/javascripts-history-object-pushstate.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history