Form with remote: true not working with turbolinks

问题

I have setup a form and set remote: true on it. While it works if i directly refresh the page. IF i navigate from menu to the desired form the button just does nothing.

I tried adding "data-no-turbolink="true" to the link of menu but still it doesn't work maybe because of turbolinks 5 not sure?

<%= 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 %>

also i added the new event listener of Turbolinks 5 which makes things easier but then again..

$(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});
});

any clues welcomed!

回答1:

So it seems disabling turbolinks on certain elements worked but it changed since Turbolinks 5 and i missed it on the turbolinks 5 documentation. For future reference

examples from documentation

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

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

Rails example

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

I hope this helps but if anyone finds the real problem do let us all know!

回答2:

Try loading all the js files in head instead of at the end of the body.

<!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>

oy you will be having this same problem from now on.

and add the gem jquery turbolinks and follow the instructions there. https://github.com/kossnocorp/jquery.turbolinks then you can work again with document ready in your page

来源：https://stackoverflow.com/questions/38231797/form-with-remote-true-not-working-with-turbolinks

标签

ruby-on-rails

turbolinks

ruby-on-rails-5