Question

我在表单中有两个选择字段。每当其中一个选择字段更改值时，应更改表单的其余部分。我在选择字段中使用了以下代码：

<%= 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中更改的select字段的值。

如果更改了model1字段，我得到：

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

如果更改了model2字段，我得到：

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

但在这两种情况下我都需要以下内容。

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

我怎么能意识到这一点？

也许有一种方法可以在更改选择字段时发送所有表单数据。

谢谢！

Answer 1

阅读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类添加到两个选择元素中。

<%= 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" %>

远程选择，控制器需要更多表格数据

1 个答案: