61

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?

|improve this question
125

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!")
})
|improve this answer
23

Native JS : 

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});
|improve this answer
5

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

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn
|improve this answer
  • 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? – Dylan Vander Berg Jun 12 '17 at 15:48
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
|improve this answer
2

In rails 5 the easiest solution is to use:

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

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

|improve this answer
0

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.

|improve this answer
-1

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.

|improve this answer
-2

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

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

|improve this answer

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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