带遥控器的表格：true 不适用于 turbolinks

Question

我设置了一个表单并在上面设置了 remote: true。如果我直接刷新页面它会起作用。如果我从菜单导航到所需的表单，该按钮什么也不做。

我尝试将 "data-no-turbolink="true" 添加到菜单的 link，但它仍然不起作用，可能是因为 turbolinks 5 不确定？

<%= form_for :location, url: get_inventory_path, remote: true do |f| %>
            <div class="input-field col s12">
              <%= f.select :location_id, options_for_select(@locations.collect { |l|
                [l.station + ', ' + l.venue + ', ' + l.area + ', ' + l.city + ', ' + l.country, l.id] }, 1), {}, { id: 'location_select', class: "browser-default" } %>
            </div>
        </div>
      </div>
      <div class="card-action center-align">
        <%= f.submit "Go", class: "btn blue", data: { disable_with: "Please wait..." } %>
      </div>
      <% end %>

我还添加了 Turbolinks 5 的新事件侦听器，这使事情变得更容易，但又一次..

$(document).on('turbolinks:load',function(){
  $(".button-collapse").sideNav();
  $('select').material_select();
  $('.dropdown-button').dropdown({
    belowOrigin: true,
    constrain_width: false,
    alignment: "right"
  });
  $('.collapsible').collapsible();
  $('.tooltipped').tooltip({delay: 50});
});

欢迎提供任何线索！

Answer 1

所以它似乎在某些元素上禁用 turbolinks 有效，但自 Turbolinks 5 以来它发生了变化，我在 turbolinks 5 文档中错过了它。供日后参考

文档中的示例

<a href="/" data-turbolinks="false">Disabled</a>

<div data-turbolinks="false">
  <a href="/">Disabled</a>
</div>

Rails 示例

<%= link_to "Overview", inventory_index_path, :"data-turbolinks"=>"false" %>

我希望这对您有所帮助，但如果有人发现真正的问题，请告诉我们！

Answer 2

尝试将所有 js 文件加载到头部而不是主体末尾。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "app" %></title>
    <%= csrf_meta_tags %>
    <%= favicon_link_tag %>
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
  </head>
  <body>
    <%= render "layouts/application_header" %>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <%= yield %>
        </div>
      </div><!--/row--> 
  </body>
</html>

哎呀，从现在开始你会遇到同样的问题。

并添加 gem jquery turbolinks 并按照那里的说明进行操作。 https://github.com/kossnocorp/jquery.turbolinks 然后您可以在页面中准备好文档后再次工作

带遥控器的表格：true 不适用于 turbolinks

Form with remote: true not working with turbolinks

ruby-on-rails

turbolinks

ruby-on-rails-5