Menu
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 %>
665
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:
<% content_for(:body_attributes) do %>
data-no-turbolink="true"
<% end %>
and that will end up rendering as:
<body data-no-turbolink="true">
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">
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.
50
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
18
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
