Rails turbolinks 中断提交远程表单答案

【问题标题】：Rails turbolinks break submit remote formRails turbolinks 中断提交远程表单
【发布时间】：2014-04-12 11:29:50
【问题描述】：

我在使用 Rails 4、Turbolinks 和远程表单时遇到了一个相当奇怪的问题。我有一个看起来像这样的表格：

<%= form_for [object], remote: true do |f| %>                                                   
    <td><%= f.text_field :name, class: 'form-control' %></td>                                     
    <td><%= f.email_field :email, class: 'form-control' %></td>                                   
    <td><%= f.submit button_name, class: 'btn btn-sm btn-primary' %></td>
<% end %>

此表单添加（创建）一个新对象。然而，它并不总是有效：

当我直接使用 URL 或刷新加载页面时；它有效
当我从我的应用导航到此页面时；它失败了

当禁用此链接的 Turbolinks 时，页面运行良好。

我有两个问题：

为什么这不起作用？这是因为远程处理程序由于 JQuery/Turbolinks 问题而没有附加到按钮上吗？
如何解决这个问题？

提前致谢。

解决方案

感谢@rich-peck，解决方案是添加一段javascript，在单击按钮时手动提交表单：

<%= javascript_tag do %>
  var id = "#<%= dom_id(f.object) %>";
  var inputs = $(id).parent().find('input');
  console.log(inputs);
  $(id).parent().find('button').on('click', function(e) {
    e.preventDefault();
    $(id).append(inputs.clone());
    $(id).submit();
  });
<% end %>

此代码将 javascript 添加到表单表行，获取输入，将它们附加到 ID 并提交表单。 preventDefault();防止在页面刷新且表单实际工作时发送两次查询。

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-4 turbolinks remote-forms

【解决方案1】：

Turbolink 不会完全重新加载您的网页，而只是其中的一部分。这就是使它们如此快速的原因，但是如果您的 JavaScript 需要重新加载整个页面，您将遇到麻烦。它确实适用于刷新的原因是因为现在您强制页面完全重新加载。

编辑：这颗宝石可能值得一试：https://github.com/kossnocorp/jquery.turbolinks

有关 turbolink 内部工作原理的更多信息：http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

或者：https://github.com/rails/turbolinks

附：还要确保 javascript_include_tag 在 head 标签内（而不是在 body 内）

【讨论】：

不 - 这是在头脑中。
我的 javascript_include_tag 在身体上...谢谢@rails4guides.com

【解决方案2】：

Turbolinks

如前所述，Turbolinks 的问题在于它使用 ajax 调用重新加载 DOM 的 <body> 部分 - 这意味着 JS 没有重新加载，因为它在头部

解决这个问题的典型方法是从documentdelegate你的JS，像这样：

$(document).on("click", "#your_element", function() {
    //your code here
});

因为document会一直存在，所以会不断触发JS

远程

你的问题有点棘手

问题是您依赖于 Rails 的 JQuery UJS（不显眼的 JavaScript）引擎，这很难自行解决

我们从来没有遇到过这个问题，而且我们一直在使用 Turbolinks - 所以我想问题可能在于您如何构建表单/处理请求。 This GitHub 似乎重现了这个问题，并且与表格有关

也许你可以试试：

<%= form_for [object], remote: true do |f| %>                                                   
    <%= f.text_field :name, class: 'form-control' %>                                     
    <%= f.email_field :email, class: 'form-control' %>                              
    <%= f.submit button_name, class: 'btn btn-sm btn-primary' %>
<% end %>

【讨论】：

感谢您的回答 - 表单确实在一个表格中（我们使用某种类似 excel 的视图，底部有一个添加行和可内联编辑的行，所以这个也将是问题的原因。我将在单击按钮以解决问题时为提交表单的每一行添加一段 Javascript。
您可以尝试手动 ajax 调用 - 从特定元素填充数据？
我确实会尝试并回复您！
我确实通过手动调用修复了它，我将这段代码添加到我的问题中。谢谢！
我遇到了完全相同的事情，Turbolinks 5 和 Rails 5，现在有没有其他方法解决这个问题？