Local form editing

Problem

In the application, there are often fragments of data that are subject to minor user editing. It would be nice to provide application users with an easy way to edit data right where they are, without opening a separate form.


')
Decision

Implementing local editing in Rails is quite simple if you use the InPlaceEditor control element owned by the script.aculo.us library and accompanying auxiliary methods. Let's get right down to business and experience all this in practice. We need to create a model and a controller with the help of which a demonstration will be held. In order not to wrap up 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 the script / server , go to _http: // localhost: 3000 / contacts / and add one or two contacts. Click on the Show link in one of the newly added contacts. A normal page will appear, 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 the necessary JavaScript files are included in the view. I usually put it in a layout that is used by default - 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 bundle. 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
<p>
<b> Name: </ b>
<% = h @ contact.name%>
</ p>

<p>
<b> Email: </ b>
<% = h @ contact.email%>
</ p>

<p>
<b> Phone: </ b>
<% = h @ contact.phone%>
</ p> ...

Change to
<p>
<b> Name: </ b>
<% = in_place_editor_field: contact,: name, {},: rows => 1%>
</ p>

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

<p>
<b> Phone: </ b>
<% = in_place_editor_field: contact,: phone , {} ,: rows => 1%>
</ p> ...



Temporary platform

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

After the upgrade, such beauty will appear ...



Clicking the button will show an unpleasant javascript error warning. Everything is correct, for editing the information we have not written more than one action. Contact app / controllers / contacts_controller.rb

There we just add two lines

It was like this
class ContactsController <ApplicationController
# 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

Will become so
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 fake request security. Without this option will not work ( more ) :)

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

Now all properties belonging to the local editing tool will save the changes made. If for example you only needed to work with the email field, it would be enough to add

in_place_edit_for: contact,: email

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

Crosspost from my blog