fields_for and jQuery accordion compatibility

I'm actually just copying an old question from railsforum as he asked it back in May '09 and the only reply is the authors own inelegant fix. I wondered if anybody knows of a better way? Otherwise I'm going to end up using javascript to move the hidden field about as he has.

Here's the original question:

Hi there! Grateful for any good advice on this topic:

Is it possible to override Rails' automatic generation of hidden ID fields in the fields_for for a has_many association? I would like to generate my own so that I can choose where the thing goes.

Here's why:

I am trying to put a jQuery-ui Accordion widget around a form that looks a bit like this:

<div id="diagram_elements_form">
    <% diagram_form.fields_for :elements do |element_fields| %>
        <% link_to "#" do %>
            <%= element_fields.object.name %>
        <% end %>
        <%= render :partial => "edit_element_base", :locals => { :f => element_fields }  %>
    <% end %>
</div>

the model, simplified, looks like:

class Diagram < ActiveRecord::Base
    has_many :elements
    accepts_nested_attributes_for :elements
end

I think I've got the model/controller stuff right because I can CRUD to my heart's content. But the accordion comes out all screwy.

the jQuery UI/Accordion widget looks for html in the form of:

<div id="accordion">
    <a href="#">First header</a>
    <div>First content</div>
    <a href="#">Second header</a>
    <div>Second content</div>
</div>

This seems like an easy thing to accomplish with rails, but I am really choking. The tabs show up but are skewed, and finally I realized it's because of the hidden_field that rails automatically adds for each object in the fields_for. What I wind up with looks like this:

<div id="accordion">
    <input type="hidden" name="...id" value="2" />
    <a href="#">First header</a>
    <div>First content</div>
    <input type="hidden" name="...id" value="3" />
    <a href="#">Second header</a>
    <div>Second content</div>
</div>

... Such that the hidden fields are getting taken as part of the accordion structure. I would like to move the ID fields inside of the DIV tags. Any ideas?

thanks again, Tyler

I'm having exactly the same issue as Tyler here. The hidden fields generated by fields_for are messing up the accordion UI and at the moment I can't see a way to change the position of them except moving them with javascript.

I shall post a link to this back on railsforum so that hopefully Tyler will receive any benefit of your collective wisdom as well.

Regards,

Kevin.

ansaurus

tags:

views:

answers:

fields_for and jQuery accordion compatibility

related questions