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

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

ただいまの
回答率

90.75%

フォームの動的な追加・削除で行が追加されない

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 218

07290729

score 1

nested_fields_for を用いて掲題の
よく見かけるようなフォームの動的な追加・削除を実装しようと試みているのですが
うまく行が追加されません。
ボタンは以下のように表示されています。

イメージ説明

エラー自体は出ておらず、私の力ではDebugのしようがなく・・・。
どのあたりに原因がありそうか、どなたかご教授いただけないでしょうか。
以下、コードの一部を記載します。

  • 実行時ログ(ADDのボタンを押したとき)
Started GET "/targetservers/new" for XX.XX.XX.XX at YYYY-MM-DD HH:MM:DD +XXXX
Processing by TargetserversController#new as HTML
  Rendering targetservers/new.html.erb within layouts/application
  Rendered targetservers/_form.html.erb (3.8ms)
  Rendered targetservers/new.html.erb within layouts/application (4.7ms)
  Rendered layouts/_shim.html.erb (0.4ms)
  Rendered layouts/_header.html.erb (0.7ms)
Completed 200 OK in 107ms (Views: 104.1ms | ActiveRecord: 0.0ms)
  • app/models/targetserver.rb
class Targetserver < ApplicationRecord
  has_many :disks, dependent: :destroy
  accepts_nested_attributes_for :disks, allow_destroy: true
end
  • app/models/disk.rb
class Disk < ApplicationRecord
  belongs_to :targetserver, optional: true
end
  • app/controllers/targetservers_controller.rb
class TargetserversController < ApplicationController
  before_action :set_targetserver, only: [:show, :edit, :update, :destroy]

  # GET /targetservers
  # GET /targetservers.json
  def index
    @targetservers = Targetserver.all
  end

  # GET /targetservers/1
  # GET /targetservers/1.json
  def show
  end

  # GET /targetservers/new
  def new
    @targetserver = Targetserver.new
    @targetserver.disks.build
  end

  # GET /targetservers/1/edit
  def edit
  end

  # POST /targetservers
  # POST /targetservers.json
  def create
    @targetserver = Targetserver.new(targetserver_params)

    respond_to do |format|
      if @targetserver.save
        format.html { redirect_to @targetserver, notice: 'Targetserver was successfully created.' }
        format.json { render :show, status: :created, location: @targetserver }
      else
        format.html { render :new }
        format.json { render json: @targetserver.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /targetservers/1
  # PATCH/PUT /targetservers/1.json
  def update
    respond_to do |format|
      if @targetserver.update(targetserver_params)
        format.html { redirect_to @targetserver, notice: 'Targetserver was successfully updated.' }
        format.json { render :show, status: :ok, location: @targetserver }
      else
        format.html { render :edit }
        format.json { render json: @targetserver.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /targetservers/1
  # DELETE /targetservers/1.json
  def destroy
    @targetserver.destroy
    respond_to do |format|
      format.html { redirect_to targetservers_url, notice: 'Targetserver was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_targetserver
      @targetserver = Targetserver.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def targetserver_params
      params.require(:targetserver).permit(:hostname, :cpumemory, :os, disks_attributes: [:id, :partitionname, :size, :_destroy])
    end
end
  • app/views/targetservers/_form.html.erb
<%= form_with(model: targetserver, local: true) do |form| %>
  <% if targetserver.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(targetserver.errors.count, "error") %> prohibited this targetserver from being saved:</h2>

      <ul>
      <% targetserver.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :hostname %>
    <%= form.text_field :hostname, id: :targetserver_hostname %>
  </div>

  <div class="field">
    <%= form.label :cpumemory, "CPU & Memory" %>
    <%= form.text_field :cpumemory, id: :targetserver_cpumemory %>
  </div>

  <div class="field">
    <%= form.label :os, "OS" %>
    <%= form.text_field :os, id: :targetserver_os %>
  </div>

  <%= form.nested_fields_for :disks, wrapper_tag: :tr do |disk| %>
    <%= disk.label :partitionname, "Partition Name" %>
    <%= disk.text_field :partitionname, value: "/", :readonly => true %>
    <%= disk.label :size, "Disk Size" %>
    <%= disk.text_field :size %>
    <%= disk.remove_nested_fields_link 'Delete', class: 'btn btn-danger', role: 'button' %>
  <% end %>
  <%= form.add_nested_fields_link :disks, 'Add', class: 'btn btn-primary', role: 'button' %>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

自己解決しました。

As Is)

  <%= form.nested_fields_for :disks, wrapper_tag: :tr |disk| %>

To Be)

  <%= form.nested_fields_for :disks, wrapper_tag: :div do |disk| %>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

nested_formを使う場合、フォームの追加・削除はJavaScriptで動きます。app/assets/application.jsに以下の記述が必要です(もしかすると、jQueryの追加の必要もあるかもしれません)。

//= require jquery_nested_form

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/21 18:09 編集

    maisumakunさん
    ご回答ありがとうございます!

    # gem list | grep jquery
    jquery-rails (4.3.1)
    jquery-ui-rails (6.0.1)

    # gem list | grep nest
    nested_form (0.3.2)
    nested_form_fields (0.8.2)

    # tail app/assets/javascripts/application.js
    // compiled file. JavaScript code in this file should be added after the last require_* statement.
    //
    // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
    // about supported directives.
    //
    //= require rails-ujs
    //= require turbolinks
    //= require_tree .
    //= require nested_form_fields
    //= require jquery_nested_form

    のような形で追加したのですが、やはりまだできないようです。。。。
    jQueryの追加の仕方が間違っているのでしょうか。。。

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る