#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'
        
gem 'pjax_rails'

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

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

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

Setting up rack-pjax

          Gemfile
                
        gem 'rack-pjax'
        
gem 'rack-pjax'

          config/application.rb
                
        config.middleware.use Rack::Pjax
        
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
        
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
        
//= require jquery.pjax

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

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