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でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails

前提 Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder 目次1 Mongoid2 スケルトンを作る3 Gmap4railsのインストール4 とりあえず地図を表示 …

RailsでOAuthを使うには~OmniAuth

By: Freenerd – CC BY 2.0   github.com/intridea/omniauth   目次1 OmniAuthの受け持つ役割2 Rails …

Rails3でECサイト構築8 都道府県の登録~spree

  都道府県の登録を忘れていた seedを追っていくとわかるのだけど、rake db:load_file[tablename.yml, dir]で登録できる サンプルは、spree_core …

RailsでECサイト構築5 プロモーションを試す~spree

  spreeをインストールするとspree-promoというエクステンションが含まれている これを使うといろいろな販売企画をすることができる 管理画面から適当に作成してみる 今回は特定の商 …

RubyでFaye-websocketを試す

By: Jenny Ondioline – CC BY 2.0 目次1 公式2 インストール3 サーバ側4 クライアント側5 エラー 公式 faye-websocketは、fayeからwe …