I'm having an issue with current default turbolinks remended load event:

document.addEventListener('turbolinks:load', function() {
  …
});

What happens is that this doesn't fire on Safari when page is loaded. Therefore I appended Turbolinks.dispatch("turbolinks:load"); to application.js.

It seemed to work fine. But on Chrome, it did fire automatically, so what it ended up happening is a double-fire of turbolinks:load event.

My first fix was to fire turbolinks:load only on non-Chrome browsers.

But somehow, even on Chrome, some of the views don't trigger turbolinks:load automatically. So I ended up having to fire it on specific views too.

The final solution I found was to use:

$(document).on('ready turbolinks:load', function() {
  …
});

This seems to fix all the issues because it fires on first page load or reload and when I click links. It also fires on Chrome and Safari.

Is there a better way to handle this?

Docs say that first version is correct, but that doesn't seem to be the case.

Am I missing something?

(note: using jQuery is not a downside for me and I know I could implement that with a couple of document.addEventListener)

I'm having an issue with current default turbolinks remended load event:

document.addEventListener('turbolinks:load', function() {
  …
});

What happens is that this doesn't fire on Safari when page is loaded. Therefore I appended Turbolinks.dispatch("turbolinks:load"); to application.js.

It seemed to work fine. But on Chrome, it did fire automatically, so what it ended up happening is a double-fire of turbolinks:load event.

My first fix was to fire turbolinks:load only on non-Chrome browsers.

But somehow, even on Chrome, some of the views don't trigger turbolinks:load automatically. So I ended up having to fire it on specific views too.

The final solution I found was to use:

$(document).on('ready turbolinks:load', function() {
  …
});

This seems to fix all the issues because it fires on first page load or reload and when I click links. It also fires on Chrome and Safari.

Is there a better way to handle this?

Docs say that first version is correct, but that doesn't seem to be the case.

Am I missing something?

(note: using jQuery is not a downside for me and I know I could implement that with a couple of document.addEventListener)

• javascript
• ruby-on-rails
• turbolinks

Share Improve this question Follow edited May 1, 2018 at 18:55 lucasarruda asked May 1, 2018 at 17:15 lucasarrudalucasarruda 1,48211 gold badge2626 silver badges4545 bronze badges 2

• How are you loading in Turbolinks? i.e. where are your script tags on the page and are you using async on the <script>? – Dom Christie Commented May 2, 2018 at 7:03
• I'm loading the normal Rails way, on assets pipeline. Then I moved it from body to head and added async on it. Loading all in one js (application.js), so I don't have async issues. – lucasarruda Commented May 2, 2018 at 15:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

As noted in the ments, you are loading the Turbolinks with async. Turbolinks currently does not work well when loaded asynchronously. So the best advice at the moment is to remove the async attribute from the script tag, or use defer instead.

Why?

Turbolinks listens out for the DOMContentLoaded event on the first load to then trigger turbolinks:load. By loading it asynchronously, it's possible that the script finishes loading/executing after the HTML has been parsed and DOMContentLoaded fired. In this case, turbolinks:load will not be fired.

There is currently a GitHub issue to discuss some possible solutions for the library to implement: https://github./turbolinks/turbolinks/issues/281