How to disable Turbolinks in a specific page?

Question

I have an issue with a script only working when refreshing the page and so I'm trying to disable Turbolinks for only that page. The code below doesn't work. However, if I add the "data-no-turbolink" attribute directly to the body tag in application.html.erb it works. How do I disable Turbolinks in my view? I have followed the solution posted here, Rails 4: disable Turbolinks in a specific page but I can't get it to work.

I have the gem 'jquery-turbolinks' installed.

policy.html.erb

<% content_for :body do %>
 <% if controller.controller_name == 'pages' && controller.action_name == 'policy' %>
  <body data-no-turbolink="true">
 <% end %>
<% end %>

<div class="row">
 <div class="small-12 medium-8 large-7 columns end">
  <a href="//www.com/" class="nostyle" title="Policy">Policy</a>
  <script>(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.java.com/java.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document); 
  </script>
 </div>
</div>

In Turbolinks 5 use `data-turbolinks="false"` – maicher Feb 24 '17 at 12:17 — maicher, Feb 24 '17 at 12:17

Ruby Racer · Accepted Answer · 2016-05-23T17:47:58.473

26

You can use this oneliner in your layout:

<body <%= "data-no-turbolinks='true'".html_safe if controller_name=="pages" && action_name=="policy" %>>

But the other way to do it, which I use mostly, would be to put this chunk of code to the links leading to this page...

So, let's suppose your route is named :policy, you should do this:

<%= link_to "Policy", policy_path, :"data-no-turbolink" => true %>

Long time has gone, here is an update

Recently, I have started using turbolinks 5.0 beta, by:

gem 'turbolinks', '~> 5.0.0.beta'

It gets far easier... All document ready javascript gets loaded, no problem... All you have to do is add a listener to the load event.

$(document).on('turbolinks:load', named_function );
var named_function = function() {
    // thinks to do on document load
}

You don't have to also add

$(document).ready(function (){
     // stuff
});

or

$(document).ready(named_function);

Because Turbolinks will gracefully fall back to document load if the page is hard loaded.

edited May 23 '16 at 17:47

answered Nov 28 '14 at 21:39

Ruby Racer

5,690
1
26
43

I used your second method and it works great. Thanks. – ECsAUtaVku Nov 28 '14 at 23:51
1

If you happen to use CoffeeScript, simply replace your (common) first line `$ ->` with `$(document).on 'turbolinks:load', ->` – sequielo Aug 14 '16 at 07:10
1

more sexy format: <%= link_to "Policy", policy_path, data: {'no-turbolink' => true} %> – nilid May 26 '17 at 15:15
Is this still valid for TL5? – Brad Jun 09 '17 at 15:42
@brad, the lower part of the answer is pretty much it. – Ruby Racer Jun 09 '17 at 16:24
1

That doesn't disable it though, that's just hooking into the load event? – Brad Jun 09 '17 at 17:11
I'm getting issues with html5 videos still loading on pages after a turbolink, so want to disable it for them pages – Brad Jun 09 '17 at 17:11
You should post a question with your issue. There has to be something that can be fixed there – Ruby Racer Jun 09 '17 at 19:49

score 16 · Answer 2 · answered Jul 23 '17 at 20:12

16

For turbolinks 5 if you use this method mentioned above:

    <%= link_to "Policy", policy_path, :"data-no-turbolink" => true %>

You'll need to change it to:

    <%= link_to "Policy", policy_path, :"data-turbolinks" => false %>

answered Jul 23 '17 at 20:12

Stonewall Thomas

161
1
2

2

And in HAML it needs to be `:'data-turbolinks' => 'false'` – haffla Feb 14 '18 at 15:30
That's why I hate stackoverflow sometimes. Outdated/old-version answer has more up-votes and still marked as "best answer". Thank you Thomas for the turbolinks5 clarification! – BinaryButterfly Jan 22 '19 at 08:16

score 8 · Answer 3 · answered Feb 24 '18 at 15:23

I tried the other methods mentioned here to no avail, but from the Turbolinks 5 docs, you can insert this meta tag on the page that you want to always load without Turbolinks.

<meta name="turbolinks-visit-control" content="reload">

Adding a data attribute to all links means that you have to know where all those links are, which is brittle if you have a situation where there might be inline links in user-created content.

The body tag data attribute method didn't work for me as I'd expect it to - I'd have assumed that loading a turbolinks-supported page and then clicking a link to go to a page where you want to disable turbolinks would result in a full, standard page load. That didn't seem to be the case, especially with back button or history navigation.

Adding this meta tag forces Turbolinks 5 to do a full page reload before it attempts to insert any content into the dom. You get that classic flash of a blank page, but if like me, you're using external Javascript that needs to fire without interference from Turbolinks, that's the desired behaviour.

score 6 · Answer 4 · answered Nov 28 '14 at 20:25

6

this is going sound really simple

<%- if params[:controller] == 'controller_name' and params[:action] == 'index' %>
  <body data-no-turbolink="true">
<%- else %>
  <body data-no-turbolink="false">
<%- end %>

I hope this help.

answered Nov 28 '14 at 20:25

Aldo Delgado

168
2
7
14

10

In Turbolinks5, use `` instead. – ka2n Sep 03 '16 at 09:51

score 2 · Answer 5 · answered Dec 02 '19 at 21:02

2

For the last Turbolinks, I've to add both add:

<meta name="turbolinks-visit-control" content="reload">

in the <head> and:

 <body data-turbolinks="false">

in place of the <body> tag to fully disable Turbolinks for a specific page.

answered Dec 02 '19 at 21:02

Hartator

5,029
4
43
73

score 1 · Answer 6 · answered Aug 19 '20 at 08:29

1

To turn off turbolink for a specific link

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

answered Aug 19 '20 at 08:29

Saurav Kumar

891
8
14

How to disable Turbolinks in a specific page?

6 Answers6

Linked