Rails 5：使用 jQuery 提交表单

Question

如果任何元素发生更改，我正在尝试使用 jQuery 提交表单。目前我没有使用remote: true。

这里是渲染部分的代码：

views/assets/index.html.erb
<%= render @assets %>

部分代码：

views/assets/_asset.html.erb
<%= form_for [asset.project, asset] do |f| %>
  ...
<% end %>

以下是表单提交的javascript代码：

$(document).on('turbolinks:load', function() {
  if (!($(".assets.index").length > 0)) return;

  $('.edit_asset').change(function() {
    alert("submitting..");
    $(this).submit();
  });
});

它正在做alert，但没有提交表单，请建议..

Answer 1

实际上问题是$(this) vs this。所以应该是

this.submit(); # or
$(this)[0].submit();

但是对required: true 等表单元素的客户端验证将不起作用，因为它绑定到表单的提交按钮。所以我们必须触发那个事件，我是这样做的：

views/assets/_asset.html.erb
<%= form_for [asset.project, asset] do |f| %>
  ...
  <%= f.submit "Update", style: "display: none;" %>
  ...
<% end %>

Javascript 代码将是：

$(document).on('turbolinks:load', function() {
  if (!($(".assets.index").length > 0)) return;

  jQuery.fn.submitOnChange = function() {
    $(this).change(function() {
      $(this).find("input[type=submit]").click();
    })
    return this;
  }
  $('.edit_asset').submitOnChange();
});

如果我们想远程执行此操作，我们必须将remote: true 和authenticity_token: true 添加到form_for，所以它将是：

<%= form_for([asset.project, asset], authenticity_token: true, remote: true) do |f| %>

Answer 2

您的问题是.change 中的$(this) .edit_asset 是针对该元素并尝试提交它。您需要找到表单对象并提交它：

$(document).on('turbolinks:load', function() {
  if (!($(".assets.index").length > 0)) return;

  $('.edit_asset').change(function() {
    alert("submitting..");
    $(this).parents('form').submit();
  });
});

这也可能会给您的安装带来一些压力，我建议您在更改后稍作超时然后提交，而不是不断地用提交请求敲打您的 rails 安装。