50

I'm trying to make a JS snippet work in a concrete page with Rails 4 and Turbolinks. I've tried with the standard solution:

<script type="text/javascript">

    var ready = function() {
        // Bla bla
    };

    $(document).ready(ready);
    $(document).on('page:load', ready);
</script>

But it doesn't seem to work. My snippet is something like this:

<script type="text/javascript">
  function ismready() 
  {
    var API_KEY = "api key";
    var roomId  = "room id";
    var ism = new Ismuser(API_KEY, roomId);
    ism.init({
      board: {
        layer: "board"
      },
      video: {
        camsContainer: "guest"
      },
      chat: {
        layer: "chat"
      },
      moderator: true,
    });
  }
</script>
<script src="http://assets.ismuser.com/v0.4/js/ismuser.js" type="text/javascript"></script>

The snippet doesn't work as expected (even with the standard solution) and finally I just want to disable Turbolinks in this page.

How can i do it?

-- Solution

<% content_for :body do %>
    <% if controller.controller_name == 'home' && controller.action_name == 'demo1' %>
        <body data-no-turbolink="true">
    <% end %>
<% end %>
Arslan Ali
  • 17,418
  • 8
  • 58
  • 76
Rubén Jiménez
  • 1,835
  • 5
  • 21
  • 29
  • Is the action_name related to "index", "edit", etc? This would be a great solution, since I want to limit turbolinks to everything EXCEPT index pages. – onebree May 14 '15 at 18:38

10 Answers10

77

Here's a cleaner solution:

In /app/views/layouts/application.html.erb, replace the <body> tag with this:

<body 
  <% if content_for?(:body_attributes) %>
    <%= yield(:body_attributes) %> 
  <% end %>>

Now, if you want to disable turbolinks in a particular view, e.g. /app/views/home/index.html.erb, you can add this to the file:

for Rails 4

  <% content_for(:body_attributes) do %>
    data-no-turbolink="true"
  <% end %>

and that will end up rendering as:

<body data-no-turbolink="true">

for Rails 5

In Rails 5, the syntax is slightly different:

  <% content_for(:body_attributes) do %>
    data-turbolinks="false"
  <% end %>

and that will end up rendering as:

<body data-turbolinks="false">
fearless_fool
  • 33,645
  • 23
  • 135
  • 217
  • 3
    This, I think, is much cleaner than the accepted answer, especially if you have many controllers and actions. This has saved my bacon twice! – Adam Denoon Mar 25 '16 at 16:25
  • 1
    this is not working for me, using rails 5 and turbolinks 5, I also have change the syntax to data-turbolinks=false – buncis Aug 29 '17 at 11:13
  • 1
    @icemelt: let me know if the updated answer works for you. – fearless_fool Sep 11 '17 at 18:51
  • @fearless_fool it's still not working, but if I hardcode it instead using `:body_attributes` it's work – buncis Jan 24 '18 at 09:04
50

Add “data-no-turbolink” to the <body> tag of the the page you want it disabled on

If you have a shared layout file which i am assuming you do, you can do an if statement and check the params[:controller] and params[:action] and just add it to the one area

Edited Jan 2021: As pointed out by @weltschmerz under rails 5 data-turbolinks="false" is the preference.

Dennis Hackethal
  • 13,662
  • 12
  • 66
  • 115
emcanes
  • 1,398
  • 10
  • 7
18

Solutions on here didn't work for me, turns out Turbolinks changed the syntax for disabling Turbolinks on a single page in their new release (5.0.0).

To disable it on a page with Turbolinks 5.0.0+, add data-turbolinks="false" to the links of the page you want to disable:

<a href="/link" data-turbolinks="false">Page without Turbolinks</a>

It also works on any of the links' ancestors, so in this example both links will lead to non-turbolinked pages:

<div data-turbolinks="false">
  <a href="/link1">Page without Turbolinks</a>
  <a href="/link2">Another page without Turbolinks</a>
</div>

To enable it on a single link with all the other links disabled in a specific element:

<div data-turbolinks="false">
  <a href="/link1">Page without Turbolinks</a>
  <a href="/link2">Another page without Turbolinks</a>
  <a href="/link3" data-turbolinks="true">Page with Turbolinks enabled</a>
</div>

I also tried adding it to the body of the page I want it disabled on, similar to the old method but with using data-turbolinks="false" instead of data-no-turbolink="true" - and that worked too!

Source: Turbolinks on GitHub

Rani Kheir
  • 1,049
  • 12
  • 15
11

Just a slightly modified version of fearless_fool's answer, which rendered strangely due to white space and quotes:

Application.html.erb

<body <%= yield(:body_attributes) %>>

View.html.erb

<%= content_for(:body_attributes, 'data-no-turbolink') %>
coreyward
  • 77,547
  • 20
  • 137
  • 166
Abram
  • 39,950
  • 26
  • 134
  • 184
4

Here is an alternative way to code this up, I just choose which tag to display based on the controller name.

    <html>
      <head></head>
      <% if controller.controller_name == 'subscriptions' %>
        <body data-no-turbolink>
      <% else %>
        <body >
      <% end %>

     Add the rest of my body here...

     </body>
   </html>
Coherent
  • 1,933
  • 5
  • 24
  • 33
2

Here's a solution in Haml with Rails 5.2.1

In your application.haml:

  %body{data: {turbolinks: (content_for :turbolinks)}}

In your template.haml:

- content_for :turbolinks {"false"}
Gerard Simpson
  • 2,026
  • 2
  • 30
  • 45
1

For anyone is already using rails 5. If you want to disable entire turbolink for a specific page, just add this line "data-turbolinks='false'" to the body of that page:

<body data-turbolinks="false">
Peter Nguyen
  • 349
  • 4
  • 13
0

Here is a solution that works by disabling turbolinks on the page that a link links to. In this case, the 'edit post' page:

<%= link_to 'Edit', edit_post_path(@post), 'data-no-turbolink' => true %>
johnthekline
  • 1
0

This worked.

Where ever the link is to the page do something like this

  %div{"data-turbolinks" => "false"}
    = link_to 'Send payment', new_payments_manager_path(sender_id: current_user.id, receiver_id: @collaboration.with(current_user).id, collaboration_id: params[:id]), class: 'button'
joeyk16
  • 1,357
  • 22
  • 49
0

I had a situation in a Rails 5.2.4.4 app where I had a script working before I added turbolinks. All I did was include turbolinks in application.js. Doing that broke my working script. I did several things in application.html.erb to get turbolinks working on a single page.

I used the solution of @Coherent for the body statement. I also retrieve the action and controller values to use in my turbolinks script.

<% if params[:action] == "action_name" && params[:controller] == "controller_name" %>
  <body data-action='<%= "#{params[:action]}" %>' data-controller='<%= "#{params[:controller]}" %>'>
<% else %>
  <body data-turbolinks="false" data-action='<%= "#{params[:action]}" %>' data-controller='<%= "#{params[:controller]}" %>'>
<% end %>

This is how I wrote my turbolinks script in the head section. When I look at the source the turbolinks script is included on the selected page. Otherwise the comment appears on the page.

<% if params[:action] == "action_name" && params[:controller] == "controller_name" %>
  <script>
    my turbolinks script logic here
  </script>
<% else %>
  <!-- some logic here -->
<% end %>

I tried disabling each link by adding data-turbolinks="false" on the page where my original script was working. I could not get it to work. I added the following statement to the head section. I found this here in the Turbolinks documentation. If all else fails this statement seems to work.

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

Both scripts work as expected.

Pamela Cook - LightBe Corp
  • 3,912
  • 5
  • 50
  • 86