Rails 4 + simple_form and jQuery UI. Datepicker is not working via turbolinks

问题:

I have this form which calls datepicker:

...  ... 

Simple_form wrapper: app/inputs/datepicker_input.rb

class DatepickerInput  attribute_name.to_s + "-alt"})   end end 

When the page is loaded from scratch ( $(document).ready event ), the following html is generated:

However, when the page is loaded with turbolinks (from side nav bar, "page:load" event), the rendered HTML is the following:

Of course, I can simply add hasDatepicker class in .html.erb or in application.js file, but I wonder if it's possible to achieve it with Rails functionality.

回答1:

I finally found a suitable fix:

app/inputs/datepicker_input.rb is left the same, the wrapper works nice.

assets/javascripts/application.js

//= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap.js //= require_tree .  $(document).on("page:load ready", function(){     $("input.datepicker").datepicker(); }); 

Since :datepicker input type adds ".datepicker" class to rendered HTML, it's enough just to bind datepicker() to all elements with that class. It does the trick with the least amount of code.

It's important to specify "input.datepicker" since the ".datepicker" class is added both to label and input tags.

turbolinks throws a page:load event, so I've added handler for both cases - when the page loads with turbolinks, and when it loads from scratch (window refresh, link saved in favourites, etc)

Now the following .html.erb is rendered as I expect:

 'Select date', input_html: {class: "form-control"},     label: "Expiration date: " %> 

output:

   Expiration date:    
     
 
 

回答2:

The following works for me in simple_form and jquery-ui:

js:

$('input#date_field').datepicker();

form:

'Select Date' %>

So without as: :datepicker.

回答3:

Try this:

 'Select Expiration Date' %> 

Javascript

 $(document).ready(function() {     $('#order_expiration_date').datepicker({         changeMonth: true,         changeYear: true,         yearRange: '-70:-18'     });   }); 

app/assets/javascript/application.js should be

//= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require jquery.ui.all //= require turbolinks 

文章来源: Rails 4 + simple_form and jQuery UI. Datepicker is not working via turbolinks