gpt4 book ai didi

ruby-on-rails - Rails turbolinks 中断提交远程表单

转载 作者:行者123 更新时间:2023-12-01 08:29:42 26 4
gpt4 key购买 nike

我在使用 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 时,页面运行良好。

我有两个问题:

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

提前致谢。

解决方案

感谢@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();防止在页面刷新且表单实际工作时发送两次查询。

最佳答案

Turbolinks

如前所述,Turbolinks 的问题在于它会重新加载 <body>带有 ajax 调用的 DOM 的一部分 - 意味着 JS 不会重新加载,因为它在头部

解决此问题的典型方法是 delegate 您的 JS 来自 document ,像这样:

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

因为document总是会出现,会不断触发JS


远程

你的问题有点棘手

问题是您依赖 JQuery UJS Rails 的(不显眼的 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 %>

关于ruby-on-rails - Rails turbolinks 中断提交远程表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22281918/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com