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
-,

執筆者:

関連記事

Rails3.2のアプリをデプロイ~apache+passenger+postgresql

  環境 ubuntu server 12.04 目次1 postgresql2 apache+passenger3 デプロイ準備 postgresql インストール 参照 Ubuntu s …

no image

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

    HTML5ではブラウザからユーザーのPCの位置情報を取得することができるGeoLocation APIというものがある (もちろんデフォルトではユーザーに確認をする設定にな …

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …

no image

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

  公式 backbonejs.org/ Backbone ドキュメント日本語訳 github.com/enja-oss/Backbone イントロダクション github.com/enja