Railsで使えるGem

Rails4でフォーム要素を動的に追加したり削除したり〜nested_form

投稿日:2014年1月20日 更新日:

参考

RailsCastsで紹介されてたフォームがGemになってたので試してみた

railscasts.com/episodes/196-nested-model-form-revised?view=asciicast

github.com/ryanb/nested_form

Rails4で 1対多、多対多関連しているときのフォームを作るなら、Nested Form Gemが便利

前提の環境

Modelにhas_manyとaccepts_nested_attributes_forが書いてある

関連するモデルの削除を許すなら allow_destroy: true オプションを付けておく

 

Gemfile

application.jsに追加

 

View

nested_form_forヘルパーが使える

link_to_addとlink_to_removeを配置する

READMEだとlink_to_addをpでくくってるけど、追加がうまくできなかった

Controller

Strong Paramatersで許可

このとき、:_destroyを許可しておく必要がある.

というのも、いったん追加したフォームはremoveしてもjqueryで隠しただけで、残っている.

そして、隠したフォームに、_destroyフラグをつけてsubmitしているため.

これがないと、いったん追加したあとに、removeしても、空欄のフォームのデータが追加されてしまうことになる.

できた

screenshot

パーシャル化

こんな感じでパーシャルに渡すこともできる このとき_task_fields.html.erbというファイル名のパーシャルを探しに行く

パーシャルにはfという変数に渡される

フォームを追加する場所を指定する

追加するフォームはaddリンクの直前に追加されるけど、これを任意の場所に追加するようにしてみる

追加するフォームにはdiv.fieldsというタグがつくので、これをつけないようにする

試しにtableでくくる このとき追加する場所を指定するためにidをつけておく

link_to_addでtarget指定する

パーシャルをtr要素にしておく このときにクラスにfieldsをつけておく これがないと削除できない

できた

screenshot

一対一の場合

一対一の場合、フォームを一個だけ追加して、あとは追加しないという処理を追加する必要がある.

その場合、jQueryのイベントを使えば簡単に対処できる.
例えば、追加するフィールドに名前をつけて(ここでは、#sakana)、、、

で、addで追加されるフォームはdiv.fieldsでくくられているので、#sakana以下の.fields数を数えて1を越える場合は削除してしまう.

試した環境は、Rails5.0.0.1+simple_formでした.

そのほか

addとremoveのときにjqueryイベントを呼べるとか、simple_formでも使えるとか

番外編: 1つのモデルで任意の数のデータを送信するフォームの作例

前提

views(form)

まず、new.html.erbを作成する.
form_tagでサブミットボタンとQ&Aが貼られる場所、Q&Aの追加リンクを準備する.

routes

add_pathを作成.

controller

qandasコントローラにaddアクションを作成する.

views(js.coffeeテンプレート)

add.js.coffeeテンプレートを作成する.

views(パーシャル)

_qanda.html.erbを作成する.
ついでに、削除リンクを作っておく.

controller(create)

createアクションを作る.
できたフォームで送信されるデータは、こんな感じ.

これにあわせてStrongParameterとcreateを作成.

できた.

screenshot_from_2016-10-30-174251

-Railsで使えるGem
-,

執筆者:

関連記事

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

  d3.jsにはlayoutというおおまかに準備されたレイアウトがあって、その中にあるTreeレイアウトを試してみることにした d3.js自身のapiリファレンスが階層構造になっているので …

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …

no image

railsでdocxを生成する動画

  知り合いに試しに使ってもらうのに動画を作成しました

RubyでWikiをはじめる〜gollum

目次1 環境2 インストール3  ハロー Gollum4 Powでつかう5 情報 環境 Ruby 2.1.0 Mac OSX Mavericks インストール 自分の環境ではこれをいれとかないとインス …