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

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

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

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

这也可能会给您的安装带来一些压力，我建议您在更改后暂停一段时间然后提交，而不是不断地通过提交请求来敲打您的 rails 安装。

Answer 2

实际上问题是 $(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| %>

Rails 5: 使用 jQuery 提交表单

Rails 5: Submit form with jQuery

jquery

ruby-on-rails

ujs

ruby-on-rails-5