Search code examples
ruby-on-railsturbolinksruby-on-rails-5

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!


Solution

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