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.

Visitant

What problems are you having with the submit url? – Trevatrevah

Answer 1

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.

Visitant

how does it know what URL to submit to? – Cipolin

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

Answer 2

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.

Abound

You can un-clunk that case statement and simply return this: format.js { render :text => @email.send(params[:wants]) } – Mcgary

Answer 3

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

Rama

Regarding those .erb.js files, would you mind taking a look at my other post? I'd really appreciate it! #260976 – Visitant

Answer 4

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

Rama

Answer 5

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)

Jurado