web-dev-qa-db-ja.com

Rails-モーダルフォームを使用して1つのモデルにオブジェクトを追加し、その変更をメインページに反映する方法は？

私はRailsアプリに取り組んでおり、最もクリーンな方法が不明な状況に遭遇しました。

私はSO=コードサンプルなどを使用して質問を投稿しました-回答がありませんでした。問題について考えるほど、私はこれに間違った方法で取り組む可能性があると思います。（ https://stackoverflow.com/questions/9521319/how-to-reference-form-when-rendering-partial-from-js-erb-のSO質問を参照してくださいファイル ）

それで、より一般的なアーキテクチャタイプの質問：現在、ユーザーが新しいレシピを追加できるフォームがあります。フォームでは、ユーザーが成分を選択することもできます（Ingredient.allを含むcollection_selectを使用します）。問題は、ユーザーがレシピフォームを離れることなく、その場で新しい材料を追加できることです。

非表示のdivといくつかのjQuery/AJAXを使用して、ユーザーがクリックして、シンプルなフォームである食材/new.html.erbを含むモーダルフォームをポップアップ表示できるリンクがあります。そのフォームが送信されたら、食材/create.js.erbを呼び出して、食材が保存されていることを確認し、モーダルdivを非表示にします。レシピフォームに戻りましたが、collection_selectが更新されていません。

ここにいくつかの選択肢があるようです：

  1. フォームのcollection_select部分を再レンダリングして、材料の新しいリストを取得します。これは、SO質問を書いたときに試みていた方法でした。私が遭遇した問題は、collection_selectに使用する部分が親フォームを渡す必要があることです。 JSファイルにフォームオブジェクトを渡す方法がわかりません。

  2. レシピフォームを再読み込みします。これは機能します（collection_selectに新しい材料が含まれるようになりました）が、ユーザーはレシピフォームで行った進捗をすべて失います。フォームデータを永続化する方法が必要です-手動で値をやり取りすることを考えましたが、それはずさんで、より良い方法が必要です...

  3. JQueryを使用してタグを手動で挿入してみてください-これは簡単ですが、複数の材料を追加できるようにしているため、どのIDをターゲットにするかがわかりません。

さて、この問題を抱えるのは私一人だけではありません-簡単に逃す方法はありますか？上記のオプション2は好きですが、メインのレシピフォームを送信したかのように、paramsハッシュ全体を簡単に取得できる方法があるかどうかはわかりません。

うまくいけば、誰かが私を正しい方向に向けて、これに対する答えを見つけることができます...これがまったく意味をなさない場合は、私に知らせてください-必要に応じてコードサンプルを投稿できますが、関連するコードのほとんどはSO質問です。

ありがとう！

ruby-on-railsjqueryajax
2
Jim

新しいアイテムの作成ではこれを行っていませんが、編集については同様のことを行っています。これが「最もクリーンな」方法かどうかはわかりませんが、うまくいきました。

以下はRails 3.1、jQuery、およびcoffeescriptで動作します。Rails 3.2を使用している場合は、.erbをコーヒースクリプトファイル js2coffee を使用すると、以下を簡単に変換できます（コーヒースクリプトを使用していない場合）。

（/app/views/drops/edit.js.coffeeにある）ダイアログコードを次のように定義しました：

$("#edit-drop-form").dialog
  autoOpen: true
  height: 460
  width: 380
  title: 'Edit Drop'
  buttons:
    "Cancel": ->
      $("#edit-drop-form").dialog "close"
    "Save": ->
      $.post "/drops/<%= @drop.id %>.json", $("#edit-drop-form form").serializeArray(), (data, text, xhr) ->
        if (xhr.status == 200)
          # Update the DOM here!
          $("#notice").empty().append("Drop updated successfully!")
          $("#edit-drop-form").dialog "close"
  open: ->
    $("#edit-drop-form").html "<%= escape_javascript( render('form') ) %>"

上記の例では、「フォーム」パーシャルがポップアップにレンダリングされ、Dropsコントローラーの「更新」アクションのjsonハンドラーがリクエストを処理します。

新しいアイテムを作成するためにこれを変更するには、作成アクションに「json」ハンドラーを追加し、上記と同様のjavascriptファイル（new.js.coffeeと呼ばれます）を用意します。また、「投稿」のパスを作成アクションに調整する必要があります。

私のコメントが「ここでDOMを更新する」と言っているところは、選択を更新する場所です。 IngredientsControllerの「index」アクション用のjsonハンドラーを作成し、「$。get "/ingredients.json"」を呼び出して、返されたデータに基づいて選択内容を置き換えます。

1
Catharz