Ruby on Rails 3, forms, ajax, nested, in-place editing, one-by-one. Best practice

Question

Assume, that I have a complex nested form with many fields.

I want to edit its fields one-by-one in ajax way, so that every time I see form - it is in 'show' style (without fields to change information), but with possibility to switch any particular field or group of fields to 'edit' mode with it's own 'save' or 'update' button.

Solving this kind of problem, I ended up with two ways:

1. Extended use of Ryan Bates' complex-form-examples.
   The disadvantage of this way is that every field (or group of fields) requires it's own code (i.e. javascript: 'insert_fields'), which renders corresponding 'edit' style form, so it results in page is overwhelmed by javascripts.

2. Second - is unified procedure of loading corresponding edit partials through ajax through special controller action (i.e. get_partial), which "render :do updates" given field's area by 'edit' form.
   For given field or group of fields i have partials for 'edit' and for 'show'. When i need to switch that field to edit mode i send request (link_to ...,'/.../get_partial?partial=foo',:remote => true) with necessary params by ajax, and some controller#action renders that partial by javascript.

I think that second approach is better one, but I can't figure out how optimize it the best.

Are there any more elegant solutions to this problem?

Answer 1

What if you generated a normal 'edit' form (with all the nested fields, etc), and then had the javascript hide the fields and add the text of the field and an edit link next to it. So for example say your form looks like:

= form_for @foo do |f|
  = f.text_field :name

and your javascript would do this to it (1):

= form_for @foo do |f|
  = f.text_field :name, :class => "hide"
  <the value of the field here>
  = link_to "edit", "#"

then make your javascript add a click event to the edit links that, when clicked, does:

= form_for @foo do |f|
  = f.text_field :name
  = f.submit "Save"

then you'd need more javascript that makes the save button submit the form (ajax), and go back to (1) above