Rails Turbolinks中断提交远程表单 [英] Rails turbolinks break submit remote form
问题描述
使用Rails 4，Turbolinks和远程表单时，我遇到了一个很奇怪的问题.我有一个看起来像这样的表格:
I'm having a rather weird problem using Rails 4, Turbolinks and a remote form. I have a form looking like:
<%= 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 %>
此表单添加(创建)新对象.但是，它并不总是有效:
This form adds (creates) a new object. It does however not always work:
- 当我直接使用URL或刷新加载页面时；它有效
- 当我从我的应用导航至此页面时；失败了
为该链接禁用Turbolinks时，页面运行正常.
When disabling Turbolinks for this link, the page worked perfectly.
我有两个问题:
- 为什么这行不通?这是因为JQuery/Turbolinks问题导致远程处理程序未附加到按钮上吗?
- 如何解决此问题?
谢谢.
解决方案
由于@ rich-peck，解决方案是添加一段javascript，该JavaScript可以在单击按钮后手动提交表单:
Thanks to @rich-peck, the solution was to add a piece of javascript that manually submits the form upon clicking the button:
<%= 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();防止刷新页面并实际使用表单时两次发送查询.
This code adds javascript to the form table row, getting the inputs, appending them to the ID and submitting the form. The preventDefault(); prevents the query from getting sent twice when the page is refreshed and the form actually works.
推荐答案
涡轮链接
如前所述，Turbolinks的问题在于它会通过ajax调用重新加载DOM的<body>部分-意味着JS不会重新加载，因为它在头部
As mentioned, the problem with Turbolinks is that it reloads the <body> part of the DOM with an ajax call - meaning JS is not reloaded, as it's in the head
解决此问题的典型方法是 delegate 从document，就像这样:
The typical way around this issue is to delegate your JS from the document, like this:
$(document).on("click", "#your_element", function() {
//your code here
});
因为document总是存在，它将连续触发JS
Because document is always going to be present, it will trigger the JS continuously
远程
遇到您的问题时，它会比较棘手
With your issue, it's slightly more tricky
问题在于您所依赖的 JQuery UJS (不引人注目的JavaScript)Rails引擎，很难自行修复
The problem is you're relying on the JQuery UJS (unobtrusive JavaScript) engine of Rails, which is difficult to remedy on its own
我们从来没有这个问题&我们一直都在使用Turbolinks-所以我想问题可能出在您如何构建表单/处理请求上. 这个GitHub 似乎是在重现问题，这与表格有关
We've never had this issue & we use Turbolinks all the time - so I suppose the problem could be with how you're constructing your form / handling the request. This GitHub seemed to recreate the issue, and it was to do with the table
也许您可以尝试:
<%= 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 %>
这篇关于Rails Turbolinks中断提交远程表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
