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 .

Answer 1

我遇到了类似的问题：每当使用link_to到达页面时，我都必须刷新。

在视图的正文标记中添加data-no-turbolink="true"。

通过查看Form Submit button only works after reload解决了。

Answer 2

我通过在页面中使用data: { turbolinks: false }来解决此问题，该页面链接到具有以下形式的页面：

<%= link_to "Get in Touch", 'contact', data: { turbolinks: false } %>

现在，表单每次都能完美运行（无需重新加载任何页面）

Answer 3

我对turbolinks的体验是，总是在提交表单按钮中添加一个监听器会更好：

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

原因是因为某些JS / UJS与turbolinks发生冲突，特别是与$（'document'）。ready（）函数的冲突，因为turbolinks不会刷新头部的JS，它只会替换正文。

如果你有$（'document'）。ready，你可以用turbolinks自定义监听器替换它（还有其他几个）

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

Turbolinks不会让我在没有重新加载页面的情况下提交表单

3 个答案: