#302 In-Place Editing

Nov 28, 2011 | 8 minutes | Forms, Ajax, Views

Edit an attribute in-place without leaving a page using the Best In Place gem. Learn how to add validations and support for various field types.

Click to Play Video ▶

Download:
source codeProject Files in Zip (84.4 KB)
mp4Full Size H.264 Video (18.5 MB)
m4vSmaller H.264 Video (9.87 MB)
webmFull Size VP8 Video (11.7 MB)
ogvFull Size Theora Video (24.5 MB)

Browse Source Code

Resources

          Gemfile
                
        gem 'best_in_place'
        
gem 'best_in_place'

          app/assets/javascripts/application.js
                
        //= require jquery.purr
//= require best_in_place
        
//= require jquery.purr
//= require best_in_place

          app/assets/javascripts/users.js.coffee
                
        jQuery ->
  $('.best_in_place').best_in_place()
        
jQuery ->
  $('.best_in_place').best_in_place()

          users/show.html.erb
                
        <p>
  <b>Name:</b>
  <%= best_in_place @user, :name %>
</p>
<p>
  <b>Email:</b>
  <%= best_in_place @user, :email %>
</p>
<p>
  <b>Gender:</b>
  <%= best_in_place @user, :gender, type: :select, collection: [["Male", "Male"], ["Female", "Female"], ["", "Unspecified"]] %>
</p>
<p>
  <b>Public profile:</b>
  <%= best_in_place @user, :public_profile, type: :checkbox, collection: %w[No Yes] %>
</p>
<p>
  <%= best_in_place @user, :bio, type: :textarea %>
</p>
        
        
        
        
        
        
        
        
        
      
<p>
  <b>Name:</b>
  <%= best_in_place @user, :name %>
</p>
<p>
  <b>Email:</b>
  <%= best_in_place @user, :email %>
</p>
<p>
  <b>Gender:</b>
  <%= best_in_place @user, :gender, type: :select, collection: [["Male", "Male"], ["Female", "Female"], ["", "Unspecified"]] %>
</p>
<p>
  <b>Public profile:</b>
  <%= best_in_place @user, :public_profile, type: :checkbox, collection: %w[No Yes] %>
</p>
<p>
  <%= best_in_place @user, :bio, type: :textarea %>
</p>

          users_controller.rb
                
        respond_to :html, :json
def update
  @user = User.find(params[:id])
  @user.update_attributes(params[:user])
  respond_with @user
end
        
respond_to :html, :json
def update
  @user = User.find(params[:id])
  @user.update_attributes(params[:user])
  respond_with @user
end

          app/assets/stylesheets/users.css.scss
                
        .purr {
  position: fixed;
  top: 30px;
  right: 100px;
  width: 250px;
  padding: 20px;
  background-color: #FCC;
  border: solid 2px #C66;
  &:first-letter { text-transform: uppercase; }
}
        
        
        
        
        
        
        
        
        
      
.purr {
  position: fixed;
  top: 30px;
  right: 100px;
  width: 250px;
  padding: 20px;
  background-color: #FCC;
  border: solid 2px #C66;
  &:first-letter { text-transform: uppercase; }
}