Rails turbolinks破解提交远程表单

我使用Rails 4，Turbolinks和一个远程表单有一个相当奇怪的问题。 我的表格看起来像：

此表单添加（创建）一个新对象。 但它确实不起作用：

  • 当我直接使用URL或刷新加载页面时; 有用
  • 当我从我的应用程序导航到此页面时; 它失败

当为此链接禁用Turbolinks时，该页面工作正常。

我有两个问题：

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

提前致谢。

解

感谢@ rich-peck，解决方案是添加一段javascript，点击按钮后手动提交表单： 

  var id = "#"; 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(); });

此代码将javascript添加到表单行，获取输入，将它们附加到ID并提交表单。 preventDefault（）; 防止在刷新页面并且表单实际工作时两次发送查询。

Turbolinks

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

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

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

Ps还要确保javascript_include_tag在head标签内（而不是在正文中）

Interesting Posts