94

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 9

182

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!")
})
11
  • 6
    Yes. Explained here as well. guides.rubyonrails.org/…. Check 5.2 Page Change Events.
    – Indika K
    Jul 10, 2016 at 6:58
  • 3
    turbolinks: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.
    – psparrow
    Sep 22, 2016 at 16:03
  • 3
    Despite 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
  • 1
    Hi 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.
    – Obromios
    Jan 6, 2017 at 6:23
  • 2
    Is this different for rails 6?
    – stevec
    Sep 26, 2020 at 12:45
68

Native JS :

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});
1
  • 2
    turbo:load for Turbo
    – Dorian
    Oct 9, 2021 at 17:04
14

In rails 5 the easiest solution is to use:

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

Instead of $(document).ready. Works like a charm.

5
  • 12
    Don'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 need turbolinks: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
    – cercxtrova
    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
    – cercxtrova
    Sep 7, 2019 at 22:22
9

This is my solution, override jQuery.fn.ready, then $(document).ready works without any change:

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn
1
  • 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
3

(For coffeescript)

I Use: $(document).on 'turbolinks:load', ->

Instead of: $(document).on('turbolinks:load', function() {...})

4
  • 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
    Hi folks, what is wrong with this answer in general?
    – atw
    Nov 22, 2018 at 15:26
  • 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)
    – aarona
    May 28, 2019 at 16:07
  • yes!, it is for coffeescript :). My mistake was not to specify it
    – fcabanasm
    May 29, 2019 at 17:08
3

pure modern js:

const onLoad = () => {
  alert("works")
}

document.addEventListener("load", onLoad)
document.addEventListener("turbolinks:load", onLoad)

with turbo it's turbo:load

2

Here is solution that work for me, from here:

  1. install gem 'jquery-turbolinks'

  2. add this .coffee file to your app: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

  3. name it turbolinks-compatibility.coffee

  4. at application.js

    //= require jquery
    //= require jquery_ujs
    //= require jquery.turbolinks
    //= require turbolinks
    //= require turbolinks-compatibility
    
2
  • What about in production env? Have you tested it out? There are some people telling it just work fine in development mode. Dec 16, 2016 at 7:08
  • 6
    The gem is deprecated
    – Mauro
    Sep 11, 2017 at 15:12
1

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.

0

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.

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.