0

フォームに 2 つの選択フィールドがあります。これらの選択フィールドの 1 つが値を変更するたびに、フォームの残りの部分を変更する必要があります。選択フィールドに次のコードを使用しました。

<%= f.collection_select :model1, Model1.all, :id, :name, "data-remote" => true, "data-url" => "/model3/get_rest_form"  %>
<%= f.collection_select :model2, Model2.all, :id, :name, "data-remote" => true, "data-url" => "/model3/get_rest_form"  %>

ここでの問題は、model3 コントローラーに送信された Ajax リクエストへの応答を作成するために、両方の選択フィールドの値が必要ですが、params で変更されたばかりの選択フィールドの値しか取得しないことです。

model1 フィールドが変更された場合、次のようになります。

params = {"model3"=>{"model1"=>"2"}}

model2 フィールドが変更された場合、次のようになります。

params = {"model3"=>{"model2"=>"3"}}

しかし、どちらの場合も次のものが必要です。

params = {"model3"=>{"model1"=>"2", "model2" => "3"}}

どうすればこれを理解できますか？

選択フィールドが変更されたときにすべてのフォームデータが送信されるようにする方法があるかもしれません。

ありがとうございました！

4

1 に答える 1

0

jquery_ujs.jsファイルを読んだ後、次の解決策を思いつきました。どうやら、select タグの data-params 属性に存在するデータは、ajax リクエストを使用してコントローラーに送信されるデータに追加され、ajax リクエストの準備の最初に 'ajax:before ' イベントは select 要素でトリガーされます。このイベントを使用して、フォームからデータを読み取り、シリアル化し、select 要素の data-params タグに配置します。このデータは、ajax リクエストに自動的に追加されます。これが私のコードです：

$(".add_form_data").on('ajax:before', function(event){
    var form = $(this).closest('form');
    var formData = form.serialize();
    $(this).data("params",formData);
});

add_form_dataあとは、両方の select 要素にクラスを追加するだけです。

<%= f.collection_select :model1, Model1.all, :id, :name, "data-remote" => true, "data-url" => "/model3/get_rest_form" :class => "add_form_data"  %>
<%= f.collection_select :model2, Model2.all, :id, :name, "data-remote" => true, "data-url" => "/model3/get_rest_form" :class => "add_form_data" %>
于 2012-06-13T20:51:15.530 に答える