#294 Playing with PJAX

Oct 31, 2011 | 8 minutes | Ajax, Plugins

PJAX allows you to quickly update a section of a page using AJAX with automatic pushState support. Here I show how to use both pjax_rails and rack-pjax gems.

Click to Play Video ▶

Download:
source codeProject Files in Zip (88.9 KB)
mp4Full Size H.264 Video (16.9 MB)
m4vSmaller H.264 Video (9.47 MB)
webmFull Size VP8 Video (11.4 MB)
ogvFull Size Theora Video (22.3 MB)

Browse Source Code

Resources

Setting up pjax_rails

          Gemfile
        
gem 'pjax_rails'

          app/assets/javascripts/application.js
        
//= require pjax

          layouts/application.html.erb
        
<div data-pjax-container>
  <%= yield %>
</div>

          index.html.erb
        
<title><%= yield(:title) %></div>

Setting up rack-pjax

          Gemfile
        
gem 'rack-pjax'

          config/application.rb
        
config.middleware.use Rack::Pjax

          bash
        
mkdir -p vendor/assets/javascripts
curl https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js > vendor/assets/javascripts/jquery.pjax.js

          app/assets/javascripts/application.js
        
//= require jquery.pjax

          products.js.coffee
        
jQuery ->
  $('.product a').pjax('[data-pjax-container]')

          index.html.erb
        
<div data-pjax-container>
  ...
</div>