在 Rails-UJS 中获取 AJAX 复选框值答案

【问题标题】：Get AJAX checkbox value in Rails-UJS在 Rails-UJS 中获取 AJAX 复选框值
【发布时间】：2020-02-27 13:15:30
【问题描述】：

当我尝试提交 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

This issue 讨论它，@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"}

【问题讨论】：

你能发一下日志吗？
@7urkm3n 添加了示例日志文件
尝试在触发补丁之前动态更新输入值。 object.addEventListener("change", myScript);

标签： ruby-on-rails ajax rails-ujs

【解决方案1】：

我会创建一个表单和一个在输入更改时提交表单的事件处理程序：

<% 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 处理 the gotchas involved with checkboxes 的麻烦要少得多。

【讨论】：

我很感激您可以这样做，但是如果他们的具体示例不起作用，他们为什么要鼓励我们在文档中使用 UJS 方式呢？