Forms nested multiple levels

[karianne]

I'm trying to use this gem to add a two-level structure: Theme --(has many)--> ThemeSection --(has_many)--> ThemeSectionItem. However, it seems that I'm running into a bug where " is not encoded correctly, since I get this html when trying to add a ThemeSection:

<div id="all_sections">
              <div class="section_container added-by-vanilla-nested">
  <p class="form-group form-field string required theme_theme_sections_title"><label class="control-label form-field__label string required" for="theme_theme_sections_attributes_1700576891368_title"><abbr title="påkrevd">*</abbr> Tittel</label><span class="form-field__control-wrapper"><input class="form-control form-field__control string required" required="required" aria-required="true" type="text" name="theme[theme_sections_attributes][1700576891368][title]" id="theme_theme_sections_attributes_1700576891368_title"></span></p>
  <input value="0" autocomplete="off" type="hidden" name="theme[theme_sections_attributes][1700576891368][_destroy]" id="theme_theme_sections_attributes_1700576891368__destroy"><a class=" vanilla-nested-remove " data-undo-text="Undo" data-undo-link-classes="">Remove theme section</a>
  <div class="all_items">
      </div>
  <a class=" vanilla-nested-add " data-container-selector=".all_items" data-html="<div id=" item_container"="">
  <p class="form-group form-field integer optional theme_theme_sections_theme_section_items_itemable_id"><label class="control-label form-field__label integer optional" for="theme_theme_sections_attributes_1700576891368_theme_section_items_attributes_1700576891368_itemable_id">Itemable</label><span class="form-field__control-wrapper"><input class="form-control form-field__control numeric integer optional" type="number" step="1" name="theme[theme_sections_attributes][1700576891368][theme_section_items_attributes][1700576891368][itemable_id]" id="theme_theme_sections_attributes_1700576891368_theme_section_items_attributes_1700576891368_itemable_id"></span></p>
  <input value="0" autocomplete="off" type="hidden" name="theme[theme_sections_attributes][1700576891368][theme_section_items_attributes][1700576891368][_destroy]" id="theme_theme_sections_attributes_1700576891368_theme_section_items_attributes_1700576891368__destroy"></a><a class=" vanilla-nested-remove " data-undo-text="Undo" data-undo-link-classes="">Fjern denne artikkelen</a>
</div>" data-method-for-insert="append"&gt;Add ThemeSectionItem
</div>

(note the broken data-method-for-insert at the bottom, which should have been a part of the div added by vanilla-nested)

Is this gem even supposed to be used with two levels?

---

For reference, here's my form ERB:

_form.html.erb:

<%= simple_form_for(theme) do |f| %>
....
<%= field_set_tag 'Sections' do %>
      <%= link_to_add_nested(f, :theme_sections, '#all_sections') %>
      <div id="all_sections">
        <%= f.simple_fields_for :theme_sections do |sf| %>
          <%= render 'theme_section_fields', form: sf %>
        <% end %>
      </div>
    <% end %>
    <%= f.button :submit, class: 'button--standalone' %>
<% end %>

theme_section_fields.html.erb:

<div class="section_container">
  <%= form.input :title %>
  <%= link_to_remove_nested(form, link_text: "Remove theme section") %>
  <div class="all_items">
    <%= form.simple_fields_for :theme_section_items do |sif| %>
      <%= render 'theme_section_item_fields', form: sif %>
    <% end %>
  </div>
  <%= link_to_add_nested(form, :theme_section_items, '.all_items') %>
</div>

theme_section_item_fields.html.erb:

<div id='item_container'>
  <%= form.input :itemable_id %>
  <%= link_to_remove_nested(form, link_text: "Remove item") %>
</div>

[codeborgar]

Hi, I think I have seen your issue on another gem as well, I am having the same problem in general. Have you managed to fix or find a gem that does this nicely?

[arielj]

hey! sorry I missed the original message

I'll check today, I have some idea on how to fix it, will keep you posted

[arielj]

@karianne @codeborgar can you try this branch? https://github.com/arielj/vanilla-nested/pull/77

if you are using just the ruby gem you can change the gemfile to do:

gem 'vanilla_nested', github: 'arielj/vanilla-nested', branch: "support-3-level-nesting"

if you are also using the yarn package, you can change with:

yarn add arielj/vanilla-nested#support-3-level-nesting

Note that nesting is difficult to handle automatically so there are some notes of a naming convention that's needed in this case explained on the PR description (hopefully it's clear enough, but feel free to ask here, that will help me improve the README.

[viktormarkov]

@arielj Hi, thank you for supporting the gem! I've tried the solution from PR #77, and it seems to be working as described. Can we expect this feature to be merged for the next release?