【Rails】cocoonを用いてformを動的に追加、削除したい。

Question

【Rails】COCOONを使ってformを動的に追加・削除する方法

Ruby on Railsでformを動的に追加・削除するシステムを作っています。
formを追加する機能を実装中に以下のエラーメッセージが発生しました。
何卒よろしくお願いいたします。

※cocoonはformオブジェクトがなくても2つのテーブルにデータを保存できるという認識で、formオブジェクトは使用していません。
※jqueryを導入したのは今回が初めてなので、知識が足りない部分があり、初歩的なミスもあるかもしれません。
※今回作成中のシステムはメニューに紐付く材料のフォームを動的に追加、削除できるものです。
※Rails 6.0.0

ActionView::MissingTemplate in Menues#new
Showing /Users/airidoi/projects/add_form/app/views/menues/_form.html.erb where line #4 raised:

Missing partial menues/_ingredient_fields, application/_ingredient_fields with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder]}. Searched in:
  * "/Users/airidoi/projects/add_form/app/views"
  * "/Users/airidoi/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actiontext-6.0.3.3/app/views"
  * "/Users/airidoi/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actionmailbox-6.0.3.3/app/views"

親子関係

親 menu

Colum	Type	Options
title	string	null: false
detail	string	null: false

↓↓↓動的に追加したい部分
子 ingredient

Colum	Type	Options
material	string	null: false
unit_id	integer	null: false
amount	string	null: false

該当のソースコード

new.html.erb
viewはnewとcreateしか作成していません。

<%= form_with(model: @menu, url: menues_path, local: true) do |f| %>
  
  <div class="links">
    <%= link_to_add_association '材料を追加', f, :ingredients,
    class: 'btn btn-default',
    data: {
      association_insertion_node: '#detail-association-insertion-point',
      association_insertion_method: 'append' }
    %>            
  </div>
  <%= f.label :menu %>
  <%= f.text_field :menu %>
  <div class="menu">
    <%= f.fields_for :ingredients do |i| %>
        <%= render "ingredients_fields", f: i %>
    <% end %>   
  </div>
  <div class="actions">
      <%= f.submit %>
  </div>
<% end %>

menu.rb(親モデル)

#app/models/menu.rb
class Menu < ActiveRecord::Base
  has_many :ingredients, dependent: :destroy
  accepts_nested_attributes_for :ingredients, allow_destroy: true

  validates :title, :detail, presence: true 
end

ingredient.rb(子モデル)

#app/models/ingredient.rb
class Ingredient < ActiveRecord::Base
  ApplicationRecord
  belongs_to :menu
  
  
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to_active_hash :unit
  

  validates :material, :unit_id, :amount, presence: true
  validates :unit_id, numericality: { other_than: 1 } 
end

unit.rb(ActiveHash 子モデルに紐付く)

#app/models/unit.rb
class Unit < ActiveHash::Base
  self.data = [
    { id: 1, name: '単位を選択してください' },
    { id: 2, name: '大さじ' },
    { id: 3, name: '小さじ' },
    { id: 4, name: 'ml' },
    { id: 5, name: '本' },
    { id: 6, name: '個' },
  ]
end

menues_controller.rb

#app/controllers/menues_controller.rb
class MenuesController < ApplicationController
  def new
    @menu = Menu.new
    @ingredient = @menu.ingredients.build
  end

  def create
    @menu = Menu.new(menu_params)
    @menu.save
  end

  private
  def menu_params
        params.require(:menu).permit( :title, :detail, ingredients_attributes: [:id, :material, :unit_id, :amount, :menu_id])      
  end
end

ルーティング

//route.rb
Rails.application.routes.draw do
  root to: "menues#new"
  resources :menues
end

application.js

//application.js
require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("@nathanvda/cocoon")

Gemfile

# jqueryとcocoonを一番下に追記しています。（bundle install,rails sも行なっています。）
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem "cocoon"
gem 'active_hash'
gem 'pry-rails'
gem 'jquery-rails'

試したこと

1. fや :ingredientsを別の値に入れ替えてみましたが、他のエラーが出るだけで解決しませんでした。

<%= link_to_add_association '材料を追加', f, :ingredients,

２）コントローラーにbinding.pryをかけて@menu、@ingredientの中身をみましたが、インスタンスは作成できているようでした。

補足情報（FW/ツールのバージョンなど）

Ruby on Rails 6.0.0

Answer 1

GemのリポジトリのExample(リンク)を読む限り、fileds_forの中にlink_to_add_associationを記述するべきなのではないでしょうか。
さっとリポジトリ見ただけで自信はないので、すでに試されていましたら、スルーしてください。

  <div class="menu">
    <%= f.fields_for :ingredients do |i| %>
        <%= render "ingredients_fields", f: i %>
        <div class="links">
          <%= link_to_add_association '材料を追加', f, :i,
            class: 'btn btn-default',
            data: {
             association_insertion_node: '#detail-association-insertion-point',
             association_insertion_method: 'append' }
           %> 
    <% end %>   
  </div>

Comments

[Airi.]

回答本当にありがとうございます！！
ボタンは外にあってもいいようですが、
①ボタンのclassの記述を一部変更
②コメントアウトで記述して全体の整理
こちらを行ったら画面が表示されるようになりました。
修正したのはこの場所です。↓↓↓
```
data: {
association_insertion_node: '#detail-association-insertion-point',
association_insertion_method: 'append' }
```

Answer 2

これが原因かはわかりませんが、
子供を追加するボタンの一部記述を変更すると解決いたしました。

<%# 子供を追加するボタン %>
<!---->
  <div class="links">
    <%= link_to_add_association "子供を追加", f, :children,
    class: 'btn btn-success',
    data: {
    data_association_insertion_traversal: 'closest',
    association_insertion_method: 'append' }
    %>
  </div>


<%# 子供の追加要素へ飛ばす %>
  <div class="children">
  <%= f.fields_for :children do |ch| %>
    <%= render "child_fields", f: ch %>
  <% end %>
  </div>