Local form editing

Problem

An application often encounters individual pieces of data that are subject to minor user edits. It would be nice to provide application users with an easy way to edit data right where they are, without opening a separate form.



Solution

Rails local editing is quite simple if you use the InPlaceEditor control element belonging to the script.aculo.us library and the auxiliary methods that accompany it. Let's get down to business immediately and put it all into practice. We need to create a model and a controller with which to demonstrate. In order not to turn around for a long time, we will use scaffold. In the created project, let it be Contacts (regular address book). We write in the console:
# script / generate scaffold contacts name: string email: string phone: string address_line1: string address_line2: string city: string country: string postal_code: string

Now run script / server , go to _http: // localhost: 3000 / contacts / and add one or two pins. Click the Show link in one of the newly added contacts. A regular page appears containing the details of the selected content. It is on this page that we are going to add a local editing tool.

First of all, to enable Ajax, you need to ensure that all necessary JavaScript files are included in the presentation. I usually put it in the default layout -views / layouts / contacts.html.erb
<% = javascript_include_tag: defaults%>

Next we need the plugin itself, the Rails 2.0 branch does not have it in the kit. We write in the console
script / plugin install _http: //svn.rubyonrails.org/rails/plugins/in_place_editing

Open the file app / views / contacts / show.html.erb in the editor . There will be

Name:
<% = h @ contact.name%>

Email:
<% = h @ contact.email%>

Phone:
<% = h @ contact.phone%>

...

change to

Name:
<% = in_place_editor_field: contact,: name, {},: rows => 1%>

Email:
<% = in_place_editor_field: contact,: email, {},: rows => 1%>

Phone:
<% = in_place_editor_field: contact,: phone , {} ,: rows => 1%>

...



Temporary platform

So we added local editing tools to the fields. Note that in the in_place_editor_field () method assumes that the instance name of the variable is used as the first parameter, and not the instance itself (therefore: contact is used, not @contact).

After the update, such beauty will appear ... Clicking on the button will show an unpleasant warning about a JavaScript error. It's all right, for editing information we have not written more than one action. Please contact app / controllers / contacts_controller.rb There just add two lines was so class ContactsController <the ApplicationController # the GET / contacts # /contacts.xml the GET def index












@contacts = Contact.find (: all)

respond_to do | format |
format.html # index.html.erb
format.xml {render: xml => @contacts}
end
end This

will become the
class ContactsController <ApplicationController
protect_from_forgery: only => [: create
,: delete ,: update] Contact.content_columns.each do | column |
in_place_edit_for: contact, column.name
end
# GET / contacts
# GET /contacts.xml
def index
@contacts = Contact.find (: all)

respond_to do | format |
format.html # index.html.erb
format.xml {render: xml => @contacts}
end
end

First line

protect_from_forgery: only => [: create,: delete,: update]

Enables request forgery protection. Without this option they won’t work ( more ) :)

Contact.content_columns.each do | column |
in_place_edit_for: contact, column.name
end

Now all the properties of the local editing tool that belong to them will save the changes made. If you only needed to work with the email field , for example , add

in_place_edit_for: contact,: email

instead of the previous piece of code. That's all. Good luck learning ROR!

Crosspost from my blog