Rails turbolinks破坏了提交远程表单

Question

Rails turbolinks破坏了提交远程表单

ruby-on-railsruby-on-rails-4turbolinksremote-forms

3

我正在使用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（）; 防止在页面刷新时发送查询两次，而表单实际上是有效的。

- Tom Naessens

2个回答

4

Turbolinks不会完全重新加载您的页面，而只是部分加载。这就是它们如此快的原因，但是如果您的JavaScript需要完全重新加载页面，则会遇到问题。之所以使用刷新可以解决问题，是因为现在您强制页面进行了完全重新加载。

编辑：尝试使用这个gem可能值得一试：https://github.com/kossnocorp/jquery.turbolinks 关于turbolinks内部工作方式的更多信息：http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks 或：https://github.com/rails/turbolinks 另外，请确保javascript_include_tag位于head标签中（而不是body中）。

- rails4guides.com

1

不，那只是在脑海中。 - Tom Naessens

我的 javascript_include_tag 放在了 body 里面... 感谢 @rails4guides.com - rizidoro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard Peck · Accepted Answer

Turbolinks

如上所述，Turbolinks 的问题在于它使用 ajax 调用重新加载 DOM 中的 <body> 部分 - 这意味着 JS 不会重新加载，因为它位于 head 中。

解决此问题的典型方法是从 document 委托 您的 JS，像这样：

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

因为 document 始终存在，它会不断触发 JS。

远程

对于您的问题，稍微有些棘手。

问题在于您依赖于Rails的JQuery UJS（不显眼的JavaScript）引擎，这本身就很难解决。

我们从未遇到过这个问题，而且我们一直使用Turbolinks——所以我想问题可能出在您构建表单/处理请求的方式上。这个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 %>