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!

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!

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