Turbolinks prevents normal $(document).ready()
events from firing on all page visits besides the initial load, as discussed here and here. None of the solutions in the linked answers work with Rails 5, though. How can I run code on each page visit like in prior versions?
9 Answers
Rather than listen to the ready
event, you need to hook in to an event fired by Turbolinks for every page visit.
Unfortunately, Turbolinks 5 (which is the version that appears in Rails 5) has been re-written, and does not use the same event names as in previous versions of Turbolinks, causing the answers mentioned to fail. What works now is to listen to the turbolinks:load event like so:
$( document ).on('turbolinks:load', function() {
console.log("It works on each visit!")
})
-
6Yes. Explained here as well. guides.rubyonrails.org/…. Check 5.2 Page Change Events.– Indika KJul 10, 2016 at 6:58
-
3turbolinks:load fires for me locally, but not on Heroku. I see my custom javascript code in my compiled js assets, but the event isn't firing.– psparrowSep 22, 2016 at 16:03
-
3Despite what the Rail doc says, I'm using
on('ready turbolinks:load')
otherwise I have some problems on some pages Dec 22, 2016 at 11:31 -
1Hi Cyril, I am having the same problem, i.e. need to trigger on initial page load as well as turbolinks:load. I have asked a question about this on SO, stackoverflow.com/questions/41421496/…. Do you have any more insight as to why this is so? Are you using jquery-turbolinks (I am). The only good thing is it makes sure your code is idempotent.– ObromiosJan 6, 2017 at 6:23
-
2
Native JS :
document.addEventListener("turbolinks:load", function() {
console.log('It works on each visit!');
});
-
2
In rails 5 the easiest solution is to use:
$(document).on('ready turbolinks:load', function() {});
Instead of $(document).ready
. Works like a charm.
-
12Don't add
ready
to the list, otherwise the function will be executed twice. As github.com/turbolinks/turbolinks/#observing-navigation-events said, you should do it like this:javascript $(document).ready(function() { $(document).on('turbolinks:load', function() {} ) })
Dec 30, 2018 at 8:43 -
@XiaohuiZhang Are you sure that's gonna work???? Because if
$(document).ready
gets triggered, then at least in my own scenarios, I wouldn't needturbolinks:load
Dec 31, 2018 at 6:20 -
@XiaohuiZhang If your script has to work on a page with turbolinks and on a page without, that will not work on the page without, because it will need the turbolinks:load event to execute the code Sep 5, 2019 at 9:31
-
@escanxr It works both, you can try it out. because Turbolinks always trigger "turbolinks:load" event whenever a Turbolinks page or not. Sep 6, 2019 at 17:45
-
2@XiaohuiZhang I tried with Turbolinks 5, it didn't work. If turbolinks is disabled on the page, only
ready
event is triggered. If there's turbolinks, the code is called twice Sep 7, 2019 at 22:22
This is my solution, override jQuery.fn.ready
, then $(document).ready
works without any change:
jQuery.fn.ready = (fn)->
$(this).on 'turbolinks:load', fn
-
This is exactly what I needed. This works for external libraries that rely on
document
callbacks as well. Why the downvote? This should be safe as long as turbolinks is used throughout the entire application, right? Jun 12, 2017 at 15:48
(For coffeescript)
I Use:
$(document).on 'turbolinks:load', ->
Instead of:
$(document).on('turbolinks:load', function() {...})
-
I have done that and I still getting this issue as @inye said : github.com/mkhairi/materialize-sass/issues/130. Using JS or Coffee does not really make any difference, at least NOT for me. Dec 16, 2016 at 7:22
-
2
-
My guess is that this is coffeescript and not native javascript? I gave it a +1 because this is exactly what I'm doing and it works for me (in my coffeescript file)– aaronaMay 28, 2019 at 16:07
-
pure modern js:
const onLoad = () => {
alert("works")
}
document.addEventListener("load", onLoad)
document.addEventListener("turbolinks:load", onLoad)
with turbo it's turbo:load
Here is solution that work for me, from here:
install
gem 'jquery-turbolinks'
add this .coffee file to your app: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
name it turbolinks-compatibility.coffee
at application.js
//= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require turbolinks-compatibility
-
What about in
production
env? Have you tested it out? There are some people telling it just work fine indevelopment
mode. Dec 16, 2016 at 7:08 -
6
While we await the fix to this really cool gem, I was able to move forward by modifying the following;
addCallback: (callback) ->
if $.turbo.isReady
callback($)
$document.on 'turbo:ready', -> callback($)
to:
addCallback: (callback) ->
if $.turbo.isReady
callback($)
$document.on 'turbolinks:load', -> callback($)
I'm not yet aware what this does not resolve, but it seemed to work well on initial inspection.
Use the light-weight gem jquery-turbolinks.
It makes $(document).ready()
work with Turbolinks without changing existing code.
Alternatively, you could change $(document).ready()
to one of:
$(document).on('page:fetch', function() { /* your code here */ });
$(document).on('page:change', function() { /* your code here */ });
depending on which one is more appropriate in your situation.
-
jquery-turbolinks doesn't yet support Turbolinks 5 github.com/kossnocorp/jquery.turbolinks/issues/56– AndrewHJun 27, 2016 at 17:17
-
-
2