Question

我使用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（）;在刷新页面并且表单实际有效时，会阻止查询被发送两次。

Answer 1

<强> Turbolinks

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

解决此问题的典型方法是delegate来自document的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 %>

Answer 2

Turbolinks不会完全重新加载您的页面，而只是其中的一部分。这就是它们如此之快的原因，但是如果你有需要重页加载的JavaScript，你就会遇到麻烦。它与刷新一起工作的原因是因为现在你强制页面完全重新加载。

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

关于turbolinks内部运作的一些额外信息：http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

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

P.S。还要确保javascript_include_tag在head标签内（而不是在正文中）

Rails turbolinks破解提交远程表单

2 个答案: