Rails 5 - turbolinks 5, some JS don't load on render page

Question

I have a Rails application that I recently upgraded to 5.0.0.RC1 . Most of the transition went smoothly, but I have problems with the new Turbolinks. In my application, for example, I use this stone:

 gem 'chosen-rails' 

My application.js file is as follows:

 //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require best_in_place //= require tether //= require bootstrap //= require chosen-jquery //= require_tree . //= require turbo links 

When I click on the link and visualize the view, my chosen-query ( best_in_place doesn’t work either) doesn’t work at initial load, but if I do a hard refresh of the page, it works. Below is the image of the result that I get:

And here is the image of how I want it to look:

And again, the expected result of the work, if I do a hard page refresh, but not after the usual redirect_to ...

The code for my dropdown is as follows:

 = select_tag :screen, options_from_collection_for_select(@screens, "id", "name"), id: "screen-selection", prompt: "Jump to screen", class: 'form-control chosen-select', style: "max-width: 250px !important" 

After redirect_to it outputs the following HTML:

 <select name="screen" id="screen-selection" class="form-control chosen-select" style="max-width: 250px !important">[...]</select> 

... and after hard reloading the page, I get the following:

 <select name="screen" id="screen-selection" class="form-control chosen-select" style="max-width: 250px !important; display: none;">[...]</select> <div class="chosen-container chosen-container-single" style="width: 190px;" title="" id="screen_selection_chosen"><a class="chosen-single"><span>Jump to screen</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"><li class="active-result result-selected" data-option-array-index="0" style="">Jump to screen</li><li class="active-result" data-option-array-index="1" style="">tests</li></ul></div></div> 

In the .coffee file .coffee I try to initialize the chosen as follows:

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

Any ideas on what I'm doing wrong?

Answer 1

With turbolinks, javascript loads only once. On a hard update, chosen works because the whole page is redrawn. As soon as you click on the link, turbolinks grabs the request and turns it into ajax (instead of a full page refresh). When the request arrives, turbolinks only replaces the body page, leaving JS in the same state.

To fix this, you will need to place the selected initializer in the turbolinks:load event, for example,

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

For more information see https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

Answer 2

Here is my solution with Turbolinks 5 and jQuery:

• install gem 'jquery-turbolinks

• add this file. coffee to your application: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

• name it turbolinks-compatibility.coffee

• in application.js

// = jquery required
// = require jquery_ujs
// = jquery.turbolinks required

// = require turbolinks
// = compatibility with turbolinks required

Answer 3

I had a serious headache to find a way to do all my javascript work. First I will try the solution using gem jquery.turbolinks, following this video: How to upgrade to turbolinks 5 , but I got lightboxes to display images on the same page, it doesn’t work correctly. Therefore, before just disabling 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 this on every link where javascript needs a page reload to work.

This may not be the best solution, but it makes my headache less painful.

Answer 4

Turbolinks and jquery are a headache. Instead of invoking an action on the document, on the page: loading should work better, because with turbolinks it does not reload all the documentation when viewing the website. Something like this might work:

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

Answer 5

I tried to solve it myself and found a solution that works for me.

My problem was that I had a forum with the "quote" functionality for comments. With turbolinks 5, I got a few event listeners, and in my editor there were up to four quotes from the same comment.

I read about idempotency and found a solution here: How to make jQuery` bind` or `on` idempotent event handlers

I created (really copied) a global function that I use in the globals.coffee file for events.

 $.fn.event = (name, fn) -> @unbind(name).bind name, fn 

And it works.

My functions are as follows:

 $('.quote').event 'click', (event) -> do something 

All loans for this: Pointy , who provided the solution.

Link to turbolinks and idempotence

Answer 6

Here is what I do .. Turbolinks5 to prevent downloads several times.

 var ready = function () { if ($.turboAlreadyLoaded) { $('#screen-selection').chosen({ width: '190px' }) } $.turboAlreadyLoaded = true; } $(document).ready(ready); $(document).on("turbolinks:load", ready);