combining jquery accordion and rails nested forms

Question

Hi, I'd like to generate a form with nested object forms like this (in haml):

- form_for @parent do |parent_form|
  - parent_form.fields_for :children do |child_form|
    = child_form.label :first_name
    = child_form.text_field :first_name

... and I'd like to place the child forms in a jquery ui (1.8.2) accordion, like this (I think):

- form_for @parent do |parent_form|
  %div#accordion
    - parent_form.fields_for :children do |child_form|
      %h3
        %a{ :href => "#" }Header
      %div
        -# I wish this was a content div
        = child_form.label :first_name
        = child_form.text_field :first_name

This nearly works, but fields_for inserts a hidden input at the end of each child "iteration". This input is generated as a sibling to the content div, which confuses jquery ui. It seems accordion() mistakes the hidden input for the next header, and things get jumbled from there.

I'd be much obliged if someone could tell me how to put nested forms into a jquery ui accordion.

Rgds, Dan

Answer 1

Conceding defeat, I've decided to abandon the nested form and keep the accordion. So, in case anyone is interested, now I do this:

%div.children_accordion
  - @parent.children.each do |child|
    %h3
      %a{ :href => "#"}Header
    %div
      - form_for child do |child_form|
        -# etc.

Which isn't a tragic alternative. In fact, it's superior to the big, all-inclusive form if I want to allow ajax posts of the object's component parts.