Turbolinks不允许我在不重新加载页面的情况下提交表单。

Question

我正在使用带有Turbolinks的Bootstrap 3，问题是，当我在我的编辑表单中按下提交按钮时，什么也不会发生，但如果我重新加载页面，则每个输入都可以成功提交。我不明白为什么会这样，我甚至没有在表单中使用JavaScript。以下是代码：

<div class = "row">
  <%= semantic_form_for @post do |f| %>
  <%= f.semantic_errors %>
  <div class = "form-group">
    <div class = "col-lg-9 col-md-7">   
      <%= f.input :title, :label => "Title" %>
      <%= f.input :content, :as => :rich, :allow_embeds => true %>
      <%= f.input :cat_list, :label => "Type your tags here" %>
    </div>
  <div class = "col-lg-3 col-md-4 ">
      <p>
      <%= image_tag(@post.thumbnail.url(:original), :class => "img-thumbnail") %>
      </p>
      <p>
      <%= f.input :thumbnail, as: :file %>
      </p>
      <p>
      <%= f.select :tag_list, Post::Tags, { }, { :multiple => true, :size => 10, :class => "form-control" } %>
      </p>
    </div>
  <%= f.action :submit, :as => :button, :button_html => { :class => "btn btn-primary" } %>
</div>
  <% end %>
<%= link_to 'Show', @post %> |
<%= link_to 'Back', posts_path %>

这是我的application.js的内容：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .

- John Davis

---

可能有Unobstrusive Javascript形式的javascript在工作中。你可能想要检查一下。http://railscasts.com/episodes/205-unobtrusive-javascript?view=asciicast你也可能想要确保你按正确的顺序加载你的javascript资源，你能把你的application.js的前面部分发给我们看看吗？ - Ecnalyr

我已经将application.js的内容添加到问题中。 - John Davis

我不确定ERB是否考虑缩进，但如果是的话，您的提交按钮并没有嵌套在语义表单声明下面。另外，请描述您的Rails版本。 - onebree

Answer 1

我曾遇到类似问题：每次使用link_to进入页面都需要刷新。

在您的视图的body标签中添加data-no-turbolink="true"。

看了Form Submit button only works after reload之后得到解决。

- TaylorT

Answer 2

我的经验是，对于涉及Turbolinks的内容，最好总是向提交表单按钮添加监听器，例如：

$('document').on 'click', '.submit-btn', ->
    $('form').submit()

由于一些JS/UJS与turbolinks存在冲突，特别是那些带有$('document').ready()函数的JS/UJS，因为turbolinks只替换正文而不刷新头部中的JS。如果你使用了$('document').ready()，可以用turbolinks的自定义监听器（还有其他几个）来替代它。

$(document).on('page:load', ready)

- rav

Answer 3

我通过在链接到表单页面的页面中使用data: { turbolinks: false }来解决了这个问题，如下所示：

<%= link_to "联系我们", 'contact', data: { turbolinks: false } %>

现在，表单每次都可以完美地工作（无需任何页面重新加载）。

- stevec