Good way to handle inline-edit form using Rails and jQuery

Question

I have a list of items, being displayed in a series of DIVs. When someone clicks on an "edit" link, I want to replace the div with a form that will let them edit the contents of that item in a nice way.

I'm trying to think of the ideal way to handle this. Do I create a hidden edit form for every item in the list, and hook the edit link to reveal it, like this:

<div>
    <a href="#">edit</a> Item One
    <div id="edit_1202" class="editform">Edit form goes here</div>
</div>
<div>
    <a href="#">edit</a> Item Two
    <div id="edit_2318" class="editform">Edit form goes here</div>
</div>

Or is there a better way to fetch the data and insert the form's HTML into the right spot? Remember, I'm using jQuery, so I can't use the prototype helpers.

Thanks!

Answer 1

The shortest way to an answer is, as is so often the case, Ryan Bates' Railscasts . He has an episode on using jQuery with Rails . While he doesn't specifically cover it, a reasonably elegant solution can be crafted from the basics he shows.

In my case, the edit link would be overridden to send an ajax request to the server, which returns javascript to build a partial with the form edit code. Easy, once you know how!

Answer 2

I would suggest using a plugin of some kind. This is a pretty standard feature, why recode something that someone's already written? Check out the jeditable plugin.

After reading your comment, yes. I'd probably do that with jQuery as you describe if you wanted to make everything be editable at once. I don't think I've seen a plugin that handles more than one field at a time.

Answer 3

I think this is what you are looking for: the jquery edit in place plugin

http://davehauenstein.com/code/jquery-edit-in-place/example/ http://code.google.com/p/jquery-in-place-editor/

I have recently used it and it works place. Check out the examples in the first link above.

If that is really not what you are looking for, you might want to load a remote page with jquery ajax load. Then you would be able to add whatever kind of form elements you want.

http://docs.jquery.com/Ajax/load

$('.yourlinkid').click(function(){
   var id = $(this).attr('id');
   $("div#editThisDiv").load("/events/editAjax/" + id);
});