0

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>
nab1994
  • 15
  • 1
  • 4
  • Do you have any errors on your browser s console? – Othmane El Kesri Jun 20 '17 at 23:30
  • I occasionally get a "Cannot read property 'split' of undefined at Object.parseDate" related to the datepicker, but it doesn't seem to have any effect. Tried removing the requires for the datepicker and the issue still persists with chosen. Also just remembering that I've tried rake assets:clobber and rake assets:precompile with no success. – nab1994 Jun 20 '17 at 23:55

1 Answers1

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.

hoangdd
  • 511
  • 2
  • 13
  • 1
    Thank you! This was it and makes sense. I switched the $(document).ready to $(document).on('turbolinks:load') and it worked perfectly. – nab1994 Jun 23 '17 at 00:45