Jeditable JQuery plugin on Rails

The Jeditable JQuery plugin is an awesome piece of javascript code that allows the users of your webpage to just click some text and edit it in place. So instead of having an “edit” page for your data, you let the user edit directly from the “show” page.

The usage of the plugin is very easy, as explained on their homepage. You just wrap the editable text in a div with class “edit” and add the folowing piece of javascript code:

$(document).ready(function() {

$(‘.edit’).editable(‘http://www.example.com/save.php’);

});

$(document).ready(function() {

     $('.edit').editable('http://www.example.com/save.php');

 });

This will make the text clickable. When the user clicks on it, the text changes to an input field with a submit button, which saves the new data to save.php.

I wanted to use the Jeditable script in my Rails application, but I ran into some difficulties along the way. After some frustrating digging around I came to the following:

I added an update_field action to my controller that allows changing a single value and returns the value of that field:

  # called after editing an item
  # PUT /items/1
  # PUT /items/1.xml
  def update_field
    @item = Item.find(params[:item][:id])
    dc_ds = params[:item][:dc_ds]
    #read and write the DC datastream...
    @dc_ds = DC_datastream.new(:id => params[:item][:id])
    puts 'params update:'
    pp params

    keys = params[:dc_datastream_solr].keys
    k = keys.first
    #params[:dc_datastream_solr].each_key do |k|
      @dc_ds.send k.to_s+'=',params[:dc_datastream_solr][k]
    #end    

    @dc_ds.save_to_fedora

    render :text => params[:dc_datastream_solr][k]
  end



In the layout of the item we set the javascript AUTH_TOKEN variable so we can correctly set the authenticity token in the requests sent to Rails by JQuery:
<%= javascript_tag "var AUTH_TOKEN = #{form_authenticity_token.inspect};" if protect_against_forgery? %>




And this is the javascript that will work on e.g. <div class=”edit_area” id=”theid” name=”thename” />
//the each is needed because we need to read id and name of each item
$('.edit_area').each(function(i) {
  $(this).editable('./update_field/<%=@item.id%>', {
    type	:	'textarea',
    name	:	$(this).attr('name'),
    id		:	$(this).attr('id'),
    cancel	:	'Cancel',
    submit	:	'OK',
    indicator:	'Saving...',
    tooltip	:	'Click to edit...',
    submitdata:	{_method: "put", "item[id]": "<%=@item.id%>",authenticity_token: AUTH_TOKEN},
    rows:		10
  });
});
I iterate explicitly over all the divs on the page with class edit_area so I can set the name and id of this editable object to the name and id attribute of the respective div’s.
The submitdata line does a few things:
submitdata:	{_method: "put", "item[id]": "<%=@item.id%>",authenticity_token: AUTH_TOKEN},

_method: "put" is Rails' way of simulating an HTTP PUT verb via an HTTP POST. 

"item[id]": "<%=@item.id%>" passes the item's id back to Rails.

authenticity_token: AUTH_TOKEN includes the authenticity token in the request that is sent.