时间戳

首页 > 解决方案 > 在 Rails-UJS 中获取 AJAX 复选框值

ruby-on-rails - 在 Rails-UJS 中获取 AJAX 复选框值

问题描述

当我尝试提交 AJAX 复选框时，如果未选中复选框，我不会将值作为参数传递。我知道在普通表单中 Rails 为复选框添加了一个具有相同名称和值为 0 的隐藏字段，但这在这里不起作用，因为只有一个输入被序列化，而不是整个表单。

<input type="checkbox" name="task[1]" id="task_1" value="1" data-url="/tasks/update" data-remote="true" data-method="patch">

我正在使用 Rails-UJS，如下所述： https ://guides.rubyonrails.org/v5.2/working_with_javascript_in_rails.html#data-url-and-data-params

我还在 JQuery-UJS 中找到了这个： https ://github.com/rails/jquery-ujs/wiki/Unobtrusive-scripting-support-for-jQuery-%28list-of-data-attributes%29#data-url

这个问题讨论了它，@yourivdlans 提出了一个带有解决方案的拉取请求，但一年多后仍未被接受

日志文件可能如下所示：

点击复选框：

Started POST "/tasks/1" for ::1 at 2020-02-27 15:55:37 +0000
Processing by TestController#test as JS
  Parameters: {"task"=>"1", "id"=>"1"}

单击复选框关闭：

Started POST "/tasks/1" for ::1 at 2020-02-27 15:55:52 +0000
Processing by TestController#test as JS
  Parameters: {"id"=>"1"}

标签： ruby-on-railsajaxrails-ujs

解决方案

我只需创建一个表单和一个事件处理程序，当输入更改时提交表单：

<% form_for task, remote: true do |f | %>
  <%= f.check_box :completed, class: 'submit-on-change' %>
<% end %>

// put this in the assets pipeline / webpacker
document.addEventListener('change', function(e){
  if (e.target.matches('.submit-on-change') && e.target.form){
    e.target.form.submit();
  }
});

它比试图让 Rails-UJS 处理与 checkboxes 相关的问题要少得多。

推荐阅读