nattack
nattack

Reputation: 1

Rails - Cocoon/simple form nested fields not showing

I'm trying to create nested fields in the edit/create section of a recipe book for ingredients, directions, and utensils, but only the outline of the fields show up, without any of the nested bits.

Models

class Recipe < ApplicationRecord
    has_many :ingredients
    has_many :directions
    has_many :utensils

    accepts_nested_attributes_for :ingredients, reject_if: proc { |attributes| 
    attributes['name'].blank? }, allow_destroy: true

    accepts_nested_attributes_for :directions, reject_if: proc { |attributes| 
    attributes['step'].blank? }, allow_destroy: true

    accepts_nested_attributes_for :utensils, reject_if: proc { |attributes| 
    attributes['name'].blank? }, allow_destroy: true
end

class Ingredient < ApplicationRecord
    belongs_to :recipe
end

class Direction < ApplicationRecord
    belongs_to :recipe
end    

class Utensil < ApplicationRecord
    belongs_to :recipe
end

Recipes Controller (params)

def recipe_params
    params.require(:recipe).permit(:title, :description, :image, 
    ingredients_attributes: [:id, :name, :_destroy], directions_attributes: 
    [:id, :step, :_destroy], utensils_attributes: [:id, :name, :_destroy])
end

View

<div class="row">
    <div class="col-md-4">
      <h3>Ingredients</h3>
      <div id="ingredients">
        <%= f.simple_fields_for :ingredients do |ingredient| %>
          <%= render "ingredients_fields", f: ingredient %>
          <div class="links">
            <%= link_to_add_association "Add Ingredient", f, :ingredients, class: "btn btn-default add-button" %>
          </div>
        <% end %>
      </div>
    </div>

    <div class="col-md-4">
      <h3>Directions</h3>
      <div id="directions">
        <%= f.simple_fields_for :directions do |direction| %>
          <%= render "directions_fields", f: direction %>
          <div class="links">
            <%= link_to_add_association "Add Step", f, :directions, class: "btn btn-default add-button" %>
          </div>
        <% end %>
      </div>
    </div>

    <div class="col-md-4">
      <h3>Utensils</h3>
      <div id="utensils">
        <%= f.simple_fields_for :utensils do |utensil| %>
          <%= render "utensils_fields", f: utensil %>
          <div class="links">
            <%= link_to_add_association "Add Utensil", f, :utensils, class: "btn btn-default add-button" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>


  <%= f.button :submit, class: "btn btn-primary" %>
  </div>

Partial (for directions)

<div class="form-inline.clearfix">
    <div class="nested-fields">
    <%= f.input :step, input_html: { class: "form-input form-control" } %>
    <%= link_to_remove_association "Remove", f, class: "form-button btn btn-default" %>
    </div>
</div>

The outline for utensils also isn't showing up and I'm not sure why.

Here's what it looks like: nested forms not showing

Any help would be appreciated, thank you!

Upvotes: 0

Views: 889

Answers (1)

nathanvda
nathanvda

Reputation: 50057

Are there any nested items?

Because if there are not it would explain the behaviour: your link_to_add_association is inside the simple_fields_for loop and so it will be shown for each nested item, but it will also never be shown if there are none (note: this could be desired behaviour, but I am guessing in most cases it is not).

All examples on the cocoon documentation place the link_to_add_association outside the simple_fields_for loop. If you have trouble reading haml, check the ERB examples.

Upvotes: 1

Related Questions