FOLLOW US
Simple Update Field
Curtis Schofield wrote a gem (originally for a Blazing Cloud project, but released as open source) that lets you edit your text data right on the webpage! It’s called simple_update_field. It’s designed for the simple use case of having a webpage with a bunch of text fields that you want to edit one after the other. After the gem is in place in your Rails app, you click on the text you’d like to edit, type in your changes, then press enter or tab to save your edit to the database and move your cursor on to the next editable field, for rapid editing. You can also press escape to ditch your current edit. See it in action!
I got to help test the gem as it was still being cut! Here’s what I did to get set up with a sample rails app so I could try out simple_update_field.
$ rvm gemset create simple_update_field
$ rvm gemset use simple_update_field
$ gem install rails
$ rails new contacts
$ cd contacts/
$ echo 'rvm --create use ruby-1.9.2-p290@simple_update_field' > .rvmrc
$ cd ..
$ cd contacts/
$ rails generate scaffold person name:string phone:string
$ rake db:migrate
I opened up my Gemfile and added:
gem 'simple_update_field'
Then the gem was just a
$ bundle install
away! After the magic of getting the new gem from Curtis’ computer to mine via rubygems.org, it was time to set up my Rails app to use simple_update_field.
First, I updated my app/views/people/index.html.erb with the attributes that the gem needs to function. I wanted to turn a person’s name and phone into editable items, so I left the scaffolds in place and added simple_update_field’s custom attributes directly to the td elements for each field, along with css classes. For each person, I did this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<% @people.each do |person| %>
<tr class="person">
<td editable-resource-attribute="name"
editable-resource-model="<%=person.class.model_name.downcase%>"
editable-resource-uri="<%=url_for(person)%>"
class="name">
<%= person.name %>
</td>
<td editable-resource-attribute="phone"
editable-resource-model="<%=person.class.model_name.downcase%>"
editable-resource-uri="<%=url_for(person)%>"
class="phone">
<%= person.phone %>
</td>
<td><%= link_to 'Show', person %></td>
<td><%= link_to 'Edit', edit_person_path(person) %></td>
<td><%= link_to 'Destroy', person, confirm: 'Are you sure?', method: :delete %></td>
</tr>
<% end %> |
I left my routes.rb and my people_controller.rb as their scaffolded selves, so simple_update_gem could make use of people#update.
The only other thing I had to do was javascript integration. The gem needs to know what css selectors to look for. I opened up app/assets/javascripts/application.js and added the following lines to the bottom of the file:
|
1 2 3 4 5 |
//= require simple_update_field
$(document).ready(function() {
SimpleUpdateField('.person .name, .person .phone')
}) |
Then I restarted my rails server and checked out my people/ page, added some people, and clicked on them. It worked! It’s super-easy-to-use. If you’ve got a series of text fields you’d like to be able to edit quickly, check out simple_update_field!