I am trying to ajax load the center content and update the URL without changing the page. This all works fine except until I try to access the history. It seems window.pushState is not recording my URL's properly or popstate event is not working properly. I can successfully ajax load the previous page, but if I press back more than once, it stays on the same page. Any help would be greatly appreciated!

$(document).ready(function() {
    $('area, .ajax_link').live('click', function(event) {
        change_image(this, event);
    });

    window.addEventListener('popstate', function(event) {
        change_image(window.location, event);
    });
});

function change_image(e, event) {
    if($(e).attr('target') != '_blank') {
        event.preventDefault();
        $.post(
            base_url+'/kit/ajax_load',
            { url: this_url},
            function(return_data) {
                $('#content img').attr('src', return_data.image_src);
                $('map').html(return_data.imagemap);
            },
            'json'
        );
        history.pushState(null, null, this_url);
        update_links(this_url);
      }
}

I am trying to ajax load the center content and update the URL without changing the page. This all works fine except until I try to access the history. It seems window.pushState is not recording my URL's properly or popstate event is not working properly. I can successfully ajax load the previous page, but if I press back more than once, it stays on the same page. Any help would be greatly appreciated!

$(document).ready(function() {
    $('area, .ajax_link').live('click', function(event) {
        change_image(this, event);
    });

    window.addEventListener('popstate', function(event) {
        change_image(window.location, event);
    });
});

function change_image(e, event) {
    if($(e).attr('target') != '_blank') {
        event.preventDefault();
        $.post(
            base_url+'/kit/ajax_load',
            { url: this_url},
            function(return_data) {
                $('#content img').attr('src', return_data.image_src);
                $('map').html(return_data.imagemap);
            },
            'json'
        );
        history.pushState(null, null, this_url);
        update_links(this_url);
      }
}

• javascript
• json
• html
• jquery
• browser-history

• Is there a particular browser you're seeing this behavior in, or is it the same across all browsers you've tried that support pushState? – daxelrod Commented Sep 12, 2011 at 23:57
• Tested on Chrome and Firefox, same behavior. – Steve Commented Sep 13, 2011 at 12:39

3 Answers 3

Problem Solved

@Oliver Nightingale: I needed to remove history.pushState from my change_image function. You can not call history.pushState during an onpopstate. Here is the entire working code. I shortened it above only to include the necessary parts in question. I will be adding some fallbacks next. This is tested and works in Chrome & Firefox. Tested and does not work in IE.

$(document).ready(function() {
  $('area, .ajax_link').live('click', function(event) {
      history.pushState(null, null, $(this).attr('href'));
      change_image(this, event);
  });

  window.addEventListener('popstate', function(event) {
      change_image(window.location, event);
  });
});

function change_image(e, event) {
    if(!e instanceof jQuery) {
    var this_url = e;
    }
    else {
        var this_url = $(e).attr('href');
    }

    if($(e).attr('target') != '_blank') {
    event.preventDefault();
        $.post(
            base_url+'/kit/ajax_load',
            { url: this_url},
            function(return_data) {
                $('#content img').attr('src', return_data.image_src);
                $('map').html(return_data.imagemap);
            },
            'json'
        );

        update_links(this_url);
    }
}

Is the main body of change_image function happening onpopstate? If so it looks like you are pushing a new state everytime you pop a state, this could be causing some issues.

If you are using pushState for routing you could try using a library such as Davis to make things simpler.

How is $(e).attr('target') != '_blank' when e is window.location ?

As you are using the native HTML5 History API, you'll also want to have a check before history.pushState(null, null, this_url); to only call that if we are from a link.

Plus window.addEventListener('popstate', function(event) { the variable event here is actually the state's data.

See the following gists for working examples:

• https://gist.github./balupton/1145804 - without history.js
• https://github./browserstate/ajaxify - with history.js