CODEWITHSUNDEEP
jqueryruby-on-railsrubyjeditable
Sebastian
Sebastian

Reputation: 2942

Ruby on Rails and jeditable (jquery)

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.

Upvotes: 13

Views: 6489

Answers (5)

catalpa
catalpa

Reputation: 1982

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)

Upvotes: 0

Josh Rickard
Josh Rickard

Reputation: 1603

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.

Upvotes: 9

jonnii
jonnii

Reputation: 28332

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

Upvotes: 1

Sebastian
Sebastian

Reputation: 2942

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.

Upvotes: 5

jonnii
jonnii

Reputation: 28332

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

Upvotes: 0

Related Questions