第二次访问页面时未应用Rails CSS / JS

Question

I am trying to implement the chosen plug-in and a datepicker for my rails application and having an issue where on the second page visit (not page reload, reloading the page actually refreshes the plug-ins and brings them back), the plug-ins are appearing and then disappearing very quickly, almost as if they are getting reset.

I've tried searching for this issue but I haven't really seen anything on rails, I think it has to do with the way the scripts are served and bootstrap's css/js files, but I'm not really sure and can't pinpoint it.

I am also getting [cache miss] on my page loads, if that makes a difference.

Things I've tried:

• Switching the order of my requires in both application.js and application.css
• Moving the jQuery to initialize the plug-ins directly to the _form.erb.html page
• Moving the jQuery into a document.ready in application.js
• Removing said document.ready (and using document.bind)
• Using a setTimeout in the document.ready as a quick fix to set them back after they get "reset" (no dice here)
• Deleting a partial when I suspecting the partial's js was overriding the .chosen and .datepicker for some weird reason (not the case)

Here's some of the code, I feel like this is something so stupid and simple I am missing.

//= require rails-ujs
//= require turbolinks
//= require jquery.min
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require chosen.jquery.min
//= require bootstrap-datepicker

$(document).ready(function(){

    $('.chosen').chosen(
        {   
            allow_single_deselect: true,
            no_results_text: 'No results matched',
            width: '200px'
        }
    );

    $('.datepicker').datepicker();


});

and the application.css

 /*
 *= require_tree .
 *= require_self
 *= require chosen.min
 *= require datepicker
 */

the offending _form.html.erb

  <div class="field">
    <%= form.label :customer_id %>
    <%# form.text_field :customer_id, id: :order_customer_id %>
    <%= collection_select( :order, :customer_id, @customers, :id, :name,{selected: order.customer_id, prompt: false}, { class: 'chosen' }) %>
  </div>

  <div class="field">
    <%= form.label :date %>
    <%# form.date_select :date, id: :order_date, class: 'datepicker' %>
    <%= form.text_field :date, default: 'Pick a date', class: 'datepicker' %>
  </div>

Answer 1

I think turbolinks make it. You can confirm that by remove //= require turbolinks line in application.js file and restart your application. If you really need turbolinks in your application, check out bellow link to fix this problem.

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

Hope it helps.