It's been one and half month since Rails3 came out and it evolvolved a lot if we compare it to Rails2. This direction of evolution makes me happy.
The topic I want to write about is related to the Rails3 way of unobtrusive Javascript. To be more specific I want to show you a way how to make the scriptaculous' in place editor unobtrusive.
The idea: wouldn't it be nice if by adding some extra attributes to some html tag the displayed entity fields would become spontaneously editable?
<p id="<%= project.id %>_project_content"
data-in-place-editable="true"
data-entity="project"
data-field="content"
><%= project.content %></p>
I think it definitely would.
So let's start with it.
Let's suppose that we have a restfull resource called project and we want an in place editor in our view which is bind to the update method of our ProjectsController.
First thing you need to do is to check out the http://github.com/orbanbotond/Fast-In-Place-Editor. into your public/javascript directory of your project.
This file contains the generic repetitive mundane line's of code which would otherwise been repeated field by field in your view.
In your layout file you need to include this javascript:
<%= javascript_include_tag "myextensions/fast_in_place_editor.js" %> In your view add some extra attributes to the tag which displays your entity's fields. Let's say this is how you were displaying the content of a project:
<p id="<%= project.id %>_project_content"><%= project.content %></p>
In order to make the content in place editable do this:
<p id="<%= project.id %>_project_content"
data-in-place-editable="true"
data-entity="project"
data-field="content"
data-url="<%= project_path(project, :authenticity_token => form_authenticity_token) %>"
data-cols="60"
data-rows="6"
><%= project.content %></p>
And that's all you need to do.
Enjoy :)
