質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3871閲覧

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

Airi.

総合スコア8

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/09/20 01:35

編集2020/09/20 09:46

【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

ColumTypeOptions
titlestringnull: false
detailstringnull: false

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

ColumTypeOptions
materialstringnull: false
unit_idintegernull: false
amountstringnull: false

該当のソースコード

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

html

1 2<%= form_with(model: @menu, url: menues_path, local: true) do |f| %> 3 4 <div class="links"> 5 <%= link_to_add_association '材料を追加', f, :ingredients, 6 class: 'btn btn-default', 7 data: { 8 association_insertion_node: '#detail-association-insertion-point', 9 association_insertion_method: 'append' } 10 %> 11 </div> 12 <%= f.label :menu %> 13 <%= f.text_field :menu %> 14 <div class="menu"> 15 <%= f.fields_for :ingredients do |i| %> 16 <%= render "ingredients_fields", f: i %> 17 <% end %> 18 </div> 19 <div class="actions"> 20 <%= f.submit %> 21 </div> 22<% end %>

menu.rb(親モデル)

ruby

1#app/models/menu.rb 2class Menu < ActiveRecord::Base 3 has_many :ingredients, dependent: :destroy 4 accepts_nested_attributes_for :ingredients, allow_destroy: true 5 6 validates :title, :detail, presence: true 7end

ingredient.rb(子モデル)

ruby

1#app/models/ingredient.rb 2class Ingredient < ActiveRecord::Base 3 ApplicationRecord 4 belongs_to :menu 5 6 7 extend ActiveHash::Associations::ActiveRecordExtensions 8 belongs_to_active_hash :unit 9 10 11 validates :material, :unit_id, :amount, presence: true 12 validates :unit_id, numericality: { other_than: 1 } 13end 14

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

ruby

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

menues_controller.rb

ruby

1#app/controllers/menues_controller.rb 2class MenuesController < ApplicationController 3 def new 4 @menu = Menu.new 5 @ingredient = @menu.ingredients.build 6 end 7 8 def create 9 @menu = Menu.new(menu_params) 10 @menu.save 11 end 12 13 private 14 def menu_params 15 params.require(:menu).permit( :title, :detail, ingredients_attributes: [:id, :material, :unit_id, :amount, :menu_id]) 16 end 17end

ルーティング

ruby

1//route.rb 2Rails.application.routes.draw do 3 root to: "menues#new" 4 resources :menues 5end 6

application.js

javascript

1//application.js 2require("@rails/ujs").start() 3// require("turbolinks").start() 4require("@rails/activestorage").start() 5require("channels") 6require("jquery") 7require("@nathanvda/cocoon") 8

Gemfile

Gemfile

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

試したこと

  1. fや :ingredientsを別の値に入れ替えてみましたが、他のエラーが出るだけで解決しませんでした。
<%= link_to_add_association '材料を追加', f, :ingredients,

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

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

Ruby on Rails 6.0.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

erb

1 <div class="menu"> 2 <%= f.fields_for :ingredients do |i| %> 3 <%= render "ingredients_fields", f: i %> 4 <div class="links"> 5 <%= link_to_add_association '材料を追加', f, :i, 6 class: 'btn btn-default', 7 data: { 8 association_insertion_node: '#detail-association-insertion-point', 9 association_insertion_method: 'append' } 10 %> 11 <% end %> 12 </div>

投稿2020/09/20 13:13

Cojiro

総合スコア539

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Airi.

2020/09/25 06:49 編集

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

0

自己解決

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

<%# 子供を追加するボタン %> <!----> <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>

投稿2020/09/25 06:43

Airi.

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問