Rails 5: how to use $(document).ready() with turbo-links
JavascriptJqueryRuby on-RailsTurbolinksRuby on-Rails-5Javascript Problem Overview
Javascript Solutions
Solution 1 - Javascript
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!")
})
Solution 2 - Javascript
Native JS :
document.addEventListener("turbolinks:load", function() {
console.log('It works on each visit!');
});
Solution 3 - Javascript
In rails 5 the easiest solution is to use:
$(document).on('ready turbolinks:load', function() {});
Instead of $(document).ready
. Works like a charm.
Solution 4 - Javascript
This is my solution, override jQuery.fn.ready
, then $(document).ready
works without any change:
jQuery.fn.ready = (fn)->
$(this).on 'turbolinks:load', fn
Solution 5 - Javascript
(For coffeescript)
I Use:
$(document).on 'turbolinks:load', ->
Instead of:
$(document).on('turbolinks:load', function() {...})
Solution 6 - Javascript
pure modern js:
const onLoad = () => {
alert("works")
}
document.addEventListener("load", onLoad)
document.addEventListener("turbolinks:load", onLoad)
with turbo it's turbo:load
Solution 7 - Javascript
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
Solution 8 - Javascript
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.
Solution 9 - Javascript
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.