In place editing with rails

Update: This post is deprecated. Have a look at the last in-place-editing plugin I wrote in jQuery and its gem to work with Rails 3.

My last post addressed the need to get a decent WYSIWYG tool and/or a markup language so as to input formatted data to your web application. Today though this is just not enough. The concept in everyone’s mouth is Web 2.0 and, if something, this means giving users the full control to enrich their webs. That is, if there’s a header here or a description there she’d like to change, it should be done with little to no effort! Why not just clicking on it and typing the new text? This is the concept behind in-place-editing.

I’d say, hopefully not mistakenly, this feature was made popular by Flickr. There you can do and undo almost everything very much like a desktop application, and that is our aim as well.

There could be a lot of chin-wagging on in-place-editing, but I’ll focus on how to set up the native Rails plugin for this, which works with Prototype and Scriptaculous. If someone is interested in using jQuery and a good library for inline edit, I recommend Jeditable, it’s beautiful and simple to use. One day I’ll get my hands dirty talking about my opinion on Javascript frameworks and their pros and cons, but not today. Some people prefer to use the default Prototype and Scriptaculous libraries for Rails, since they are built-in along with a set of available helpers.

If you didn’t know, Rails was split in plugins from its version 2.0 on, the growing core functionalities made the whole thing too bulky to drive, so they wittingly decided to cut it back. In_place_editing is one of the plugins that separated from the core in the version 2.0. Now it can be found on github (here). Some vulnerabilities where discovered afterwards, but were fixed later on. Now I think it’s a nice piece of coding. Unfortunately, the README file feels a bit short to me.

First thing to do is to think what fields are going to be inline editable. I recommend all short descriptions and headers to be easily changeable by one click. Thus, usually in the Show views or sometimes also in Index views (for example in a task list) we’ll add this extra functionality. In most cases it will completely replace the Edit view, in some others, for instance those you want to use markup or wysiwyg (i.e. a mailer form) it won’t be advisable.

To install the plugin it must be downloaded or cloned from github and copied to the right location:  /vendor/plugins/in_place_editing/

Then, next thing to do is to load the default javacript files (that includes Prototype and Scriptaculous) in the header of your layout:

<%= javascript_include_tag :defaults %>

Then, since you already know what fields of your model are going to be inline-editable, you have to mark them in the controller as so. This is as simple as doing this:

class PostsController < ApplicationController
 in_place_edit_for :post, :info

where info is the field of Post that is going to be editable. At this point, only the views remain to be shaken:

<p id="activator">Edit</p>
<%= in_place_editor_field :post, :info, {}, :rows => 4, :external_control => "activator" %>

It is important to note that we are using the Scriptaculous Ajax.InPlaceEditor (read docs here).  Rows is the height of the text-area, if it’s 1 or not specified it will be an input. The external control, if specified, is a something in the page that will trigger the editing, this sometimes makes a better visual metaphor. For example, a small pencil or an edit label beside the text will do the trick. It must go before the in place editor field, or else won’t work.  The text automatically highlights when the mouse passes over it. As you will see in the Ajax.InPlaceEditor wiki you can change the color of highlighting and everything else. Another important thing to notice is that it requires an initial value or otherwise it won’t be shown. I recommend leaving a “click to edit” default text.

Remember to read the additional options of the plugin:

:rows::              Number of rows (more than 1 will use a TEXTAREA)
:cols::              Number of characters the text input should span (works for both INPUT and TEXTAREA)
:size::              Synonym for :cols when using a single line text input.
:cancel_text::       The text on the cancel link. (default: "cancel")
:save_text::         The text on the save link. (default: "ok")
:loading_text::      The text to display while the data is being loaded from the server (default: "Loading...")
:saving_text::       The text to display when submitting to the server (default: "Saving...")
:external_control::  The id of an external control used to enter edit mode.
:load_text_url::     URL where initial value of editor (content) is retrieved.
: options::           Pass through options to the AJAX call (see prototype's Ajax.Updater)
:with::              JavaScript snippet that should return what is to be sent
in the AJAX call, +form+ is an implicit parameter
:script::            Instructs the in-place editor to evaluate the remote JavaScript response (default: false)
:click_to_edit_text::The text shown during mouseover the editable text (default: "Click to edit")

And this is all really necessary to know about the helper. You can also skip the helper and create the InPlaceEditor straight away:

<p id="activator">activate</p>
<span id="post_info_1_in_place_editor"><p>click to edit</p></span><script type="text/javascript">
//<![CDATA[
new Ajax.InPlaceEditor('post_info_1_in_place_editor', '/posts/set_post_info/1', {callback:function(form) 

{ return Form.serialize(form) + '&authenticity_token=' + encodeURIComponent('A4YrXQUzO7siznNx30y1Fnzflfn/nq54VTd9PYTOzSw=') }, 

externalControl:'activator', rows:4})
//]]>
</script>

Simple, isn’t it?

Tags: flickrin place editingin_place_editing pluginmarkup languageprototyperuby on railsscriptaculouswysiwyg

2 Comments »

---