Question

I am using the rails 3 gem nested_forms and would like to change how the default blueprint for insertion is generated. I can not figure out how/where this code would comes from, and how/where I would add code to modify it.

I am currently using a partial for my form:

/app/views/units/_unit.html.haml

%tr
  %td=f.text_field :units 
  %td=f.text_field :dispatched
  %td=f.text_field :onscene
  %td=f.text_area  :actions

The code snippet that calls the partial:

/app/vies/reports/_form.html.haml

...    
%table.units
  %th Unit
  %th Dispatched%th On Scene
  %th Actions
=f.fields_for :units

%p= f.link_to_add "Add a unit", :units
...

I have all of the core functionality working, except for the template. That is auto created at run time by the gem. This template results in very simple HTML markup being used for the template.

Which is similar to the following:

<div id="units_fields_blueprint" style="display:none">
  <p class="fields">
    <input id="report_units_attributes_new_units_unit" name="report[units_attributes][new_units][unit]" size="30" type="text">
    <input id="report_units_attributes_new_units_dispatched_1i" name="report[units_attributes][new_units][dispatched(1i)]" type="hidden" value="2011">
    ...
  </p>
</div>

I would like the blueprint to have the tabular format that is in the partial, I just don’t know how to get there.

Any help would be appreciated.

Answer 1

A partial which contains only a table row, such as listed above will not be valid markup when placed within the blueprint div.

The following code is not valid markup.

<div>
  <tr>
    <td>Content</td>
  </tr>
</div>

Certain browsers (chrome for example) will attempt to correct this bad markup, which is done by stripping out the tr and td markup.

To get this type of code to work with nested_form would be complex requiring that the blueprint be created in a javascript string, and would require a modification to the builder to stop automatically surrounding inserted code in a block of code.

These changes are addressed in issue #73 for nested_form which refers to a branch created by the github user elmatou.

Another option to get a similar look and feel is to use divs and spans and create a grid structure using CSS. This is a CSS intensive process, but allows nested_form to be used without requiring alteration.