Ruby on Rails and jeditable (jquery)

Question

Has anyone gotten the jquery plugin jeditable to run properly in a Rails applications. If so, could you share some hints on how to set it up? I'm having some trouble with creating the "submit-url".

IIRC, you cannot simply call ruby code from within javascript (please let me be wrong:-). Do you mean RJS??? Isn't that limited to Prototype? I'm using jQuery.

UPDATE:
uh.....asked this a while back and in the meantime switched to a different solution. But IIRC my main issue was the following:

I'm using the RESTful resources. So let's say I have to model a blog and thus have the resource "posts". If I want to edit a post (e.g. the post with the ID 8), my update is sent via HTTP to the URL http://my.url.com/posts/8 with the HTTP verb POST. This URL however is constructed in my Rails code. So how would I get my submit-url into my jQuery code? Since this is RESTful code, my update URL will change with every post.

What problems are you having with the submit url? – Codebeef Oct 30 '08 at 12:45 — Codebeef, Oct 30 '08 at 12:45

score 9 · Answer 1 · answered Feb 15 '09 at 18:52

Here is how I wired up JEditable (1.6.2) with my restful Rails app (2.2.2):

Inline Form:

<div id="email_name"><%= h( @email.name ) %></div>

$('#email_name').editable( <%= email_path(@email).to_json %>, {
  name: 'email[name]',
  method: 'PUT',
  submitdata: {
    authenticity_token: <%= form_authenticity_token.to_json %>,
    wants: 'name'
  }
});

Controller:

def update
  @email = Email.find( params[:id] )
  @email.update_attributes!( params[:email )
  respond_to do |format|
    format.js
  end
end

update.js.erb

<%=
    case params[:wants]
    when 'name' then h( @email.name )
    # add other attributes if you have more inline forms for this model
    else ''
    end
%>

It is a bit clunky with that switch statement. It would be nice if JEditable would just save the submitted value by default if the ajax request was successful and nothing was returned.

You can un-clunk that case statement and simply return this: format.js { render :text => @email.send(params[:wants]) } — jdl, Oct 09 '09 at 06:06

score 5 · Accepted Answer · answered Nov 03 '08 at 20:07

5

Excuse me for bringing this up only now, but I just found the time to look into my code again. I think I solved my problem by the following javascript (my application.js within rails):

jQuery(document).ready(function($) {

$(".edit_textfield").each( function(i) {
  $(this).editable("update", {
         type      : 'textarea',
         rows      : 8,
         name : $(this).attr('name'),
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='../images/spinner.gif' />",
         tooltip   : 'Double-click to edit...'
     })
 });
});

This works, if your Controller URLs are RESTful.

answered Nov 03 '08 at 20:07

Sebastian

2,889
4
34
37

3

how does it know what URL to submit to? – Satchel Oct 25 '10 at 00:33
the post url happens to be the same as the show action, and forms default to the same url if nothing else is specified. The difference is in the http method, and rails routes it accordingly. – DGM Dec 16 '11 at 03:10

score 1 · Answer 3 · answered Nov 03 '08 at 20:21

1

If you're including .js files in your html then no, but if you have js inline in your view template then yes you can.

You can also have .erb.js files, which are js views.

Anything is possible :D

answered Nov 03 '08 at 20:21

jonnii

28,019
8
80
108

Regarding those .erb.js files, would you mind taking a look at my other post? I'd really appreciate it! http://stackoverflow.com/questions/260476/rails-how-to-update-a-hasmany-through-relation-via-jquery – Sebastian Nov 04 '08 at 10:40

score 0 · Answer 4 · answered Nov 03 '08 at 16:32

0

I"m not sure I entirely understand the problem you're having, but I think you could put something like this in your javascript:

<%= url_for(@post) %>

It depends how you're structuring your javascript, how you've got your files organised etc...

answered Nov 03 '08 at 16:32

jonnii

28,019
8
80
108

catalpa · Answer 5 · 2009-05-19T04:37:06.077

If you're controllers are a little less than restful. Particularly if you have an action to update a specific field then this works as well. The key is passing the authentication token.

index.html.erb

<span id="my_edit"><%= foo.bar %></span>

<script type="text/javascript">
  $(document).ready(function() {
    $("#my_edit").editable('<%= url_for(:action => "update_bar", 
                  :id => foo) %>',
                    {
                       method: 'PUT',
                       cancel    : 'Cancel',
                       submit    : 'OK',
                       indicator : "<img src='../images/spinner.gif' />",
                       tooltip   : 'Double-click to edit...',
                       submitdata: {
                         authenticity_token: <%= form_authenticity_token.to_json %>,
                       }
                     }
    });
</script>

Oversimplified controller that doesn't justify not being restful:

foo_controller.rb

def update_bar
    foo = Foo.find(params[:id])
    bar= params[:value]
            // insert justifiable code here
    foo.save
    render :text=>params[:value]
end

(Works with Rails 2.2.2 and 2.3.2 w/ Jeditable 1.7.0 and jRails 0.4, though jRails doesn't play much interaction here other than providing the includes for jQuery 1.5)

Ruby on Rails and jeditable (jquery)

5 Answers5