#302 In-Place Editing

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

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'

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

          app/assets/javascripts/users.js.coffee
        
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>

          users_controller.rb
        
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; }
}