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

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

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

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

Q&A

解決済

1回答

2280閲覧

【Ruby】cocoonを使った動的フォーム追加ができない

0W5E8fPq1EOm4yE

総合スコア13

Ruby on Rails 6

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

0グッド

0クリップ

投稿2021/08/28 05:33

編集2021/08/28 11:53

親子のテーブルをネストしてまとめてデータベースに保存をする実装を行っています。
保存はできていますが、「+」、「追加」を押したら増えるはずか変わらないままです。
つきましては何かアドバイスをお願いいたします。

イメージ説明

application.js // This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. //= require jquery // @ app/assets/javascripts/application.js //= require cocoon //= require nested_form_fields require('jquery') require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("cocoon")
articles_controller.rb class ArticlesController < ApplicationController before_action :set_article, only: %i[show edit update destroy] before_action :authenticate_user!, except: [:index, :show] # GET /articles or /articles.json def index @article = Article.includes(:user).order('created_at DESC') end # GET /articles/1 or /articles/1.json def show end # GET /articles/new def new @article = Article.new @tags = @article.tags.build @article_bodies = @article.article_bodies.build if request.xhr? respond_to do |format| format.js end end end # GET /articles/1/edit def edit redirect_to root_path unless @article.user == current_user end # POST /articles or /articles.json def create @article = Article.new(article_params) respond_to do |format| if @article.save format.html { redirect_to root_path, notice: 'Article was successfully created.' } format.json { render :index, status: :created, location: @article } else format.html { render :new, status: :unprocessable_entity } format.json { render json: @article.errors, status: :unprocessable_entity } end end end # PATCH/PUT /articles/1 or /articles/1.json def update if @article.user != current_user redirect_to root_path else respond_to do |format| if @article.update(article_params) format.html { redirect_to @article, notice: 'Article was successfully updated.' } format.json { render :show, status: :ok, location: @article } else format.html { render :edit, status: :unprocessable_entity } format.json { render json: @article.errors, status: :unprocessable_entity } end end end end # DELETE /articles/1 or /articles/1.json def destroy if @article.user != current_user redirect_to root_path else @article.destroy respond_to do |format| format.html { redirect_to articles_url, notice: 'Article was successfully destroyed.' } format.json { head :no_content } end end end private # Use callbacks to share common setup or constraints between actions. def set_article @article = Article.find(params[:id]) end # Only allow a list of trusted parameters through. def article_params params.require(:article).permit(:title,:image, tags_attributes: [:id, :text, :_destroy],article_bodies_attributes: [:id, :body,:image, :_destroy]).merge(user_id: current_user.id) end end
_article_body_fields.html.erb <div class="nested-fields"> <%= f.text_field :body,placeholder:"入力",class:"form-control4",placeholder:"ご自由にお書きください。" ,type:"text", id:"article_title",rows:"10", cols:"50",style:" font-size: 30px;"%> <p> <%= f.file_field :image, id:"inputFile"%> <p> <%= link_to_remove_association "削除", f ,class:"btn btn-sm btn-outline-secondary4"%> </div>
_tag_fields.html.erb <div class="nested-fields"> <%= f.text_field :text,placeholder:"タグ",class:"form-control2",rows:"10", cols:"60"%> <p> <%= link_to_remove_association "削除", f , required: true,class:"btn btn-sm btn-outline-secondary4"%> </div>
_form.html.erb <!DOCTYPE html> <header> <div class="container"> <header class="blog-header py-3"> <div class="row flex-nowrap justify-content-between align-items-center"> <div class="col-4 "> <%= link_to image_tag("note.png",width:"120px",height:"45px"), root_path%> </div> </header> <h2> </h2> <%= form_with model: @article, html: {multipart: true}, local: true do |f| %> <% if article.errors.any? %> <div id="error_explanation"> <h2> <%#= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li> <%= error.full_message %> </li> <% end %> </ul> </div> <% end %> <div class="center" style="padding-left: 30%;"> <label class="upload-img-btn"> <%= f.file_field :image, id:"inputFile"%> </label> <div class="field form-group"> <%= f.text_area :title, placeholder:"記事タイトル",id:"inputFile",class:"form-control4" ,type:"text", id:"article_title",rows:"4", cols:"30",style:"border: 0px none; font-size: 40px;" %> </div> <p> <div class="field form-group1"> <div id="article_bodies"> <%= f.fields_for :article_bodies do |article_body| %> <%= render "article_body_fields", f: article_body %> <% end %> <p> <%= link_to_add_association "+", f, :article_bodies,class:"btn btn-sm btn-outline-secondary4"%> </div> <%#= f.text_area :body, id:"inputFile",placeholder:"ご自由にお書きください。",class:"form-control2" ,type:"text", id:"article_title",rows:"5", cols:"30",style:"border: 0px none; font-size: 18px;" %> </div> <div class="field form-group1"> <label> <div id="tags"> <%= f.fields_for :tags do |tag| %> <%= render "tag_fields", f: tag %> <% end %> <%= link_to_add_association "タグ追加", f, :tags,class:"btn btn-sm btn-outline-secondary4"%> </div> </div> </div> <div class="field" style="padding-left: 30%;"> <%=link_to 'キャンセル', root_path, class:"btn btn-sm btn-outline-secondary4" %> <%= f.submit "ー",class:"btn btn-sm btn-outline-secondary4"%> </a> </div> <% end %>

試したこと
下記サイトを参考にjqueryがインストールされているか確認した。
https://qiita.com/matata0623/items/8868a7fcb6ec0817d064

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

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

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

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

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

guest

回答1

0

自己解決

https://qiita.com/List202/items/2ad3ddac76e0bf98116d
上記のサイトのやり方で解決しました!!

投稿2021/08/30 02:01

0W5E8fPq1EOm4yE

総合スコア13

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.31%

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

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

質問する

関連した質問