Rails 5 - turbolinks 5,some JS not loaded on page render

Question

I have a Rails app, I recently updated to 5.0.0.RC1. Most of the transition went smooth, but I\'m having some trouble with the new Turbolinks. In my app I for e

Answer 1

Here is my solution with Turbolinks 5 and jQuery:

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

Answer 2

With turbolinks the javascript is only loaded once. On the hard refresh chosen works because the entire page is re-rendered. Once you click a link, turbolinks hijacks the request and turns it into an ajax one (instead of a full page refresh). Once the request comes in, turbolinks only replaces the body of the page, leaving the JS in the same state it was.

To fix this you will need to wrap your chosen initializer in the turbolinks:load event like so

$(document).on('turbolinks:load', function() {
  $('#screen-selection').chosen({
    width: '190px'
  })
})

For more information, see https://github.com/turbolinks/turbolinks#installing-javascript-behavior

Answer 3

I tried to solve this myself and found a solution that works for me. I also hope Helpfully for others.

(function () {
    $('#screen-selection').chosen({
        width: '190px'
    })
})();

Answer 4

Here's what I do.. Turbolinks5 to prevent loaded multiple times.

var ready = function () {

   if ($.turboAlreadyLoaded) {

      $('#screen-selection').chosen({
        width: '190px'
      })
   }
$.turboAlreadyLoaded = true;

}
$(document).ready(ready);
$(document).on("turbolinks:load", ready);

Answer 5

Turbolinks and jquery are kinda headache. Instead of calling an action on document ready, on page:load should work better, 'cause with turbolinks, it doesn't reload the entire documment when you browse the website. Something like this may work:

$(document).on('page:load', function() {
  $('#screen-selection').chosen({
    width: '190px'
  })
}

Answer 6

I got a serious headache to find a way to make all my javascript work. First i try the solution with the gem jquery.turbolinks by following this video: How to upgrade to turbolinks 5 but i got lightbox for showing the images in the same page not working properly. So before just disable Turbolinks once and for all, i take more time on the github page and i try this:

<div data-turbolinks="false">
  <a href="/">Disabled</a>
</div>

You need to put that on each link where the javascript need a page reload to work.

Maybe its not the best solution, but that make my headache less painful.