Rails 4: how to use $(document).ready() with turbo-links

Question

I ran into an issue in my Rails 4 app while trying to organize JS files "the rails way". They were previously scattered across different views. I organized them into separate files and compile them with the assets pipeline. However, I just learned that jQuery's "ready" event doesn't fire on subsequent clicks when turbo-linking is turned on. The first time you load a page it works. But when you click a link, anything inside the ready( function($) { won't get executed (because the page doesn't actually load again). Good explanation: here.

So my question is: What is the right way to ensure that jQuery events work properly while turbo-links are on? Do you wrap the scripts in a Rails-specific listener? Or maybe rails has some magic that makes it unnecessary? The docs are a bit vague on how this should work, especially with respect to loading multiple files via the manifest(s) like application.js.

Answer 1

Here's what I do... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

last line listens for page load which is what turbo links will trigger.

Edit...adding Javascript version (per request):

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Edit 2...For Rails 5 (Turbolinks 5) page:load becomes turbolinks:load and will be even fired on initial load. So we can just do the following:

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

  ...your javascript goes here...

});

Answer 2

I just learned of another option for solving this problem. If you load the jquery-turbolinks gem it will bind the Rails Turbolinks events to the document.ready events so you can write your jQuery in the usual way. You just add jquery.turbolinks right after jquery in the js manifest file (by default: application.js).

Answer 3

Recently I found the most clean and easy to understand way of dealing with it:

$(document).on 'ready page:load', ->
  # Actions to do

OR

$(document).on('ready page:load', function () {
  // Actions to do
});

EDIT
If you have delegated events bound to the document, make sure you attach them outside of the ready function, otherwise they will get rebound on every page:load event (causing the same functions to be run multiple times). For example, if you have any calls like this:

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

Take them out of the ready function, like this:

$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...

Delegated events bound to the document do not need to be bound on the ready event.

Answer 4

Found this in the Rails 4 documentation, similar to DemoZluk's solution but slightly shorter:

$(document).on 'page:change', ->
  # Actions to do

OR

$(document).on('page:change', function () {
  // Actions to do
});

If you have external scripts that call $(document).ready() or if you can't be bothered rewriting all your existing JavaScript, then this gem allows you to keep using $(document).ready() with TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

Answer 5

As per the new rails guides, the correct way is to do the following:

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

or, in coffeescript:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

Do not listen to the event $(document).ready and only one event will be fired. No surprises, no need to use the jquery.turbolinks gem.

This works with rails 4.2 and above, not only rails 5.

Answer 6

NOTE: See @SDP's answer for a clean, built-in solution

I fixed it as follows:

make sure you include application.js before the other app dependent js files get included by changing the include order as follows:

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

Define a global function that handles the binding in application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

Now you can bind stuff like:

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

Answer 7

None of the above works for me, I solved this by not using jQuery's $(document).ready, but use addEventListener instead.

document.addEventListener("turbolinks:load", function() {
  // do something
});

Answer 8

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

Answer 9

You have to use:

document.addEventListener("turbolinks:load", function() {
  // your code here
})

from turbolinks doc.

Answer 10

Either use the

$(document).on "page:load", attachRatingHandler

or use jQuery's .on function to achieve the same effect

$(document).on 'click', 'span.star', attachRatingHandler

see here for more details: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Answer 11

Instead of using a variable to save the "ready" function and bind it to the events, you might want to trigger the ready event whenever page:load triggers.

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

Answer 12

Here's what I have done to ensure things aren't executed twice:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

I find using the jquery-turbolinks gem or combining $(document).ready and $(document).on("page:load") or using $(document).on("page:change") by itself behaves unexpectedly--especially if you're in development.

Answer 13

I found the following article which worked great for me and details the use of the following:

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

Answer 14

I figured I'd leave this here for those upgrading to Turbolinks 5: the easiest way to fix your code is to go from:

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

to:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

Reference: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

Answer 15

$(document).ready(ready)  

$(document).on('turbolinks:load', ready)

Answer 16

Tested so many solution finally came to this. This many your code is definitely not called twice.

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

Answer 17

I usually do the following for my rails 4 projects:

In application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

Then in the rest of the .js files, instead of using $(function (){}) I call onInit(function(){})

Answer 18

First, install jquery-turbolinks gem. And then, don't forget to move your included Javascript files from end of body of your application.html.erb to its <head>.

As described here, if you have put the application javascript link in the footer for speed optimization reasons, you will need to move it into the tag so that it loads before the content in the tag. This solution worked for me.

Answer 19

I found my functions doubled when using a function for ready and turbolinks:load so I used,

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

That way your functions don't double if turbolinks is supported!