Rails 5 - turbolinks 5,some JS not loaded on page render
<p>I have a Rails app, I recently updated to <code>5.0.0.RC1</code>. Most of the transition went smooth, but I'm having some trouble with the new Turbolinks. In my app I for example use this gem:</p>

<pre><code>gem 'chosen-rails'
</code></pre>

<p>My <code>application.js</code> file looks like this:</p>

<pre><code>//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require best_in_place
//= require tether
//= require bootstrap
//= require chosen-jquery
//= require_tree .
//= require turbo links
</code></pre>

<p>When I click on a link and render a view my <code>chosen-query</code> (<code>best_in_place</code> doesn't work as well) doesn't work in the initial load, but if I make a hard refresh of the page then it works. Below is an image of the result I'm getting:</p>

<p><a href="https://i.stack.imgur.com/y4bOl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/y4bOl.png" alt="How it looks now"></a> </p>

<p>And here is an image of how I want it to look:</p>

<p><a href="https://i.stack.imgur.com/SQ3J0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SQ3J0.png" alt="enter image description here"></a></p>

<p>Again, the expected look works if I make a hard refresh of the page, but not after a regular <code>redirect_to ...</code></p>

<p>The code for my dropdown looks like this:</p>

<pre><code>= 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"
</code></pre>

<p>After a <code>redirect_to</code> it results in the following HTML:</p>

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

<p>... and after a hard page reload I get this:</p>

<pre><code>&lt;select name="screen" id="screen-selection" class="form-control chosen-select"  style="max-width: 250px !important; display: none;"&gt;[...]&lt;/select&gt;

&lt;div class="chosen-container chosen-container-single" style="width: 190px;" title="" id="screen_selection_chosen"&gt;&lt;a class="chosen-single"&gt;&lt;span&gt;Jump to screen&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;&lt;/a&gt;&lt;div class="chosen-drop"&gt;&lt;div class="chosen-search"&gt;&lt;input type="text" autocomplete="off"&gt;&lt;/div&gt;&lt;ul class="chosen-results"&gt;&lt;li class="active-result result-selected" data-option-array-index="0" style=""&gt;Jump to screen&lt;/li&gt;&lt;li class="active-result" data-option-array-index="1" style=""&gt;tests&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>In a <code>.coffee</code> file I try to initialise <code>chosen</code> like this:</p>

<pre><code># enable chosen js
$('#screen-selection').chosen({
  width: '190px'
})
</code></pre>

<p>Any ideas on what I'm doing wrong?</p>