CODEWITHSUNDEEP
javascriptjqueryruby-on-rails-5turbolinks
martin
martin

Reputation: 3559

Prevent turbolinks 5 to load on certain <a></a>

I have several examples of the following. A link like this with no real href: 

<a href="#" id="add-item">
  <i class="fa fa-plus"></i>
</a>

And some JS that does some magic:

id = $('#watch-path-group').children().length + 1
$('#watch-path-group').append '<input style="margin-top: 4px;" id=wp_"' + id + '" name=wp_"' + id + '" type="text" class="form-control" placeholder="New path...">'

After upgrading to turbolinks 5 the behaviour has changed. When I click the link turbolinks steps in and reloads the page and in this case the newly added element disappears...

I understand that this is probably more or less what turbolinks does. Taken from github:

Turbolinks intercepts all clicks on links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.

But how do I accomplish what I am trying to do. Should I stop using link tags as described?

Thanks

Upvotes: 1

Views: 903

Answers (1)

yezzz
yezzz

Reputation: 3020

Looking at the docs, to disable turbolinks on certain links, you need to add data-turbolinks="false" attribute to the element or any of its ancestors.

So the following should work:

<a href="#" id="add-item" data-turbolinks="false">
  <i class="fa fa-plus"></i>
</a>

This of course assumes your own click handler is set up properly, your id's are unique, etc.

Upvotes: 3

Related Questions