#246 AJAX History State

Dec 27, 2010 | 10 minutes | Ajax

The new pushState function in JavaScript allows us to change the full URL with AJAX. This means the back button, reloading, and bookmark support can be easily added.

Click to Play Video ▶

Download:
source codeProject Files in Zip (123 KB)
mp4Full Size H.264 Video (21.3 MB)
m4vSmaller H.264 Video (12.6 MB)
webmFull Size VP8 Video (29 MB)
ogvFull Size Theora Video (28.1 MB)

Browse Source Code

Resources

          application.js
        
if (history && history.pushState) {
  $(function() {
    $("#products th a, #products .pagination a").live("click", function(e) {
      $.getScript(this.href);
      history.pushState(null, document.title, this.href);
      e.preventDefault();
    });
    $("#products_search input").keyup(function() {
      $.get($("#products_search").attr("action"), $("#products_search").serialize(), null, "script");
      history.replaceState(null, document.title, $("#products_search").attr("action") + "?" + $("#products_search").serialize());
    });
    $(window).bind("popstate", function() {
      $.getScript(location.href);
    });
  });
}

          products/index.js.erb
        
$("#products").html("<%= escape_javascript(render("products")) %>");
document.title = "<%= escape_javascript("#{params[:search].to_s.titleize} Products by #{(params[:sort] || 'name').titleize} - Page #{params[:page] || 1}") %>";