Ruby on Rails and jeditable (jquery)

Question

Hi there,

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".

Regards,

Sebastian

Answer 1

What's the submit-url you are using. You need to post your code.

Answer 2

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.

Regards,

Sebastian

Answer 3

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...

Answer 4

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.

Answer 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.

Answer 6

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

Answer 7

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.

Answer 8

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)

Answer 9

@sebastian: Your code din't work!!!!! Though the url shown is right.. it gives routing error... even when the routes are working fine!( the one with tick mark).... @catalpa: This worked just fine with me too!! Thanks! :)