Jeditable JQuery plugin on Rails

October 13, 2009 at 7:07 pm 2 comments

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.

edit_in_place

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. 



Advertisements

Entry filed under: Uncategorized. Tags: , , , .

Webdesign: show content on top of Flash or Silverlight component Check in Java web app if user is logged in in Rails web app

2 Comments Add your own

  • 1. justin  |  May 19, 2010 at 10:46 pm

    thanks for this. i’ve been able to adapt this to my rails 3 app and it’s working. kind of. it is saving to the db right, but it’s not returning the right text. yet.

    Reply
  • 2. Bob  |  September 10, 2010 at 3:25 pm

    How would you adapt this to a table situation? I’m learning Rails and want to incorporate this into my app. My submit URL is something like “/document/:id/tablename/:rowid” and the field names are the same in every row.

    Thanks for any insight so far!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Feeds

Articles to be written…

Twitter – kr3l

my del.icio.us

RSS Google Reader Shared Stuff

  • An error has occurred; the feed is probably down. Try again later.

RSS Listening to..

  • An error has occurred; the feed is probably down. Try again later.

%d bloggers like this: