marcos toledo's programming blog

For a couple of days I’ve been trying to implement a scriptaculous’ InPlaceEditor on one of my pet project’s scriptaculous’ Sortable list.

First I had no luck with the easy to find InPlaceEditor rails helpers that you easily find on google: The traditional in_place_editing plugin required controller changes and didn’t support rest too well. Nakajima’s “better_edit_in_place” was written in javascript rather than rails, so it would take some hacking to get it working with the authenticity token. I was starting have thoughts about implementing my own.

Luckily, I found in a forum a suggestion to use simplificator’s ‘inplace’ plugin (which I’ve forked here). It worked wonders for me, and aside from the small verbosiness on the helper declaration, it worked pretty well out of the box.

Though, the issue was that, now that I had a sortable list and an in place editor, everytime I dragged an item to reorder, it entered edit mode on mouse release. Of course that was underirable behavior, but how to fix it?

On the github’s page on scriptaculous there’s a fix which is ~20 LOC long. I didn’t like that approach. I thought a simple “Event.stop()” would make it work if added to the right place, but that right place was nowhere to be found.

Finally, I decided to change the editing from click to double clicking, so that wouldn’t be triggered by sorting! That proved to be quite easy:

Ajax.InPlaceEditor.Listeners.dblclick = Ajax.InPlaceEditor.Listeners.click
delete Ajax.InPlaceEditor.Listeners.click

Of course that monkey hack needs to be called before you declare your InPlaceEditor. If you are using the ‘inplace’ plugin, you might want to show the user how he can interact with your list items on mouseover:

<%= editable_content_tag :span, item, 'name', true, nil, {}, {:clickToEditText => 'drag to reorder and doubleclick to edit'} %>

That’s pretty much all there’s to it, but as a solution to this issue it’s as simple as it gets. If you know of a better solution for this issue, specially if it involves editing with a single click, tell us at the comments.