带远程的表单:true不能使用turbolinks

时间:2016-07-06 18:59:31

标签: ruby-on-rails turbolinks ruby-on-rails-5

我已设置表单并在其上设置<div class="row"> <div class="col s12 m3 l3"> <img src=""> </div> <div class="row"> <div class="col s12 push-m6 m6 push-l7 l2">BUY BUTTON</div> <div class="col s12 pull-m6 m6 pull-l2 l7">CONTENT</div> </div> </div> 。虽然它可以直接刷新页面。如果我从菜单导航到所需的表单,按钮就什么都不做。

我尝试将“data-no-turbolink =”true“添加到菜单链接中但仍然无法正常工作,因为turbolinks 5不确定?

remote: true

我还添加了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 %>

欢迎任何线索!

2 个答案:

答案 0 :(得分:2)

所以似乎禁用了某些元素的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" %>

我希望这会有所帮助,但如果有人发现真正的问题,请让我们都知道!

答案 1 :(得分:-1)

尝试加载头部而不是身体末端的所有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 然后,您可以再次使用页面中的文档准备工作