Rails Turbolinks 中断提交远程表单

2023-12-10

我在使用 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. 我该如何解决这个问题?

提前致谢。

Solution

感谢@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 并提交表单。预防默认();当刷新页面并且表单实际工作时,可以防止查询发送两次。


涡轮链接

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

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

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

Because document永远存在,会不断触发JS


Remote

对于你的问题,它有点棘手

问题是你依赖于jQuery UJSRails 的(不显眼的 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 %>    
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Rails Turbolinks 中断提交远程表单 的相关文章

随机推荐