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

User · Answer

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  lt head gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

document  ready ready       document  on  turbolinks load   ready

User · Answer

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

User · Answer

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   - gt  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

User · Answer

document  on  ready turbolinks load   - gt    console log   document  turbolinks load

User · Answer

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 - gt       a clickable   click   gt       alert  link clicked         equivalent in javascript  onLoad function          a clickable   click function         alert  link clicked

User · Answer

Tested so many solution finally came to this  This many your code is definitely not called twice    x000D   x000D        var has loaded false  x000D        var ready   function     x000D          if  has loaded   x000D            has loaded true  x000D              x000D               YOURJS here x000D            x000D          x000D   x000D          document  ready ready   x000D          document  bind  page change   ready   x000D   x000D   x000D

User · Answer

You have to use   document addEventListener  turbolinks load   function          your code here      from turbolinks doc

User · Answer

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

User · Answer

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

User · Answer

Recently I found the most clean and easy to understand way of dealing with it     document  on  ready page load   - gt      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   - gt            document  on  click     button   - gt                  Take them out of the ready function  like this     document  on  ready page load   - gt                 document  on  click     button   - gt          Delegated events bound to the document do not need to be bound on the ready event

User · Answer

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

User · Answer

Found this in the Rails 4 documentation  similar to DemoZluk s solution but slightly shorter     document  on  page change   - gt      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

User · Answer

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

User · Answer

Here s what I do    CoffeeScript   ready   - gt        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

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to ruby-on-rails-4

Examples related to asset-pipeline

Examples related to turbolinks