Question

I am using jquery ajax calls to change content in a div by clicking links, but my url always the same i mean its not changing by clicking the links just content changes.

so i find history.pushStates which helped me to change the url by clicking link, but it does not create history states, i mean back button of my browser is not calling past ajaxcalls.

This is my javascript code.

function PostFunc(id,page,name)
{
$.ajax
({
type: "POST",
url: "doAjax.php",
data: "mode=viewtopic&threadid="+id+"&page="+page,
success: function(msg)
    {
    $("#entrylist").ajaxComplete(function(event, request, settings)
        {
        $("#entrylist").hide().html(msg).fadeIn();
        counter = 0;
        /* TODO : LEARN PUSHSTATES */
        var replaced = name.replace(/ /g,"+");
        history.pushState(null, null,"viewtopic.php?title="+replaced);
        });
    }
});

ye.. my problem is shortly i dont know how to handle pushstates in my jquery code, and all other codes are seem so strange like they are not for ajaxcalls :/

Answer 1

You need to keep track of hashchange events and push your states to the window hash part of the URL. Here is a good discussion on keeping history on dynamic pages.

You could also find this post helpful. I have personally used hashchange plugin (detailed here) for dynamic pages, ant it works just fine for maintaining the history in synch and supporting back/forward buttons for dynamic content.