Rails 4 + simple_form и пользовательский интерфейс jQuery. Datepicker не работает через turbolinks

У меня есть эта форма, которая вызывает datepicker:

...
<%= f.input :expiration_date, as: :datepicker, required: false %>
...

Оболочка Simple_form: Приложение/входы/datepicker_input.rb

class DatepickerInput < SimpleForm::Inputs::Base
  def input
    @builder.text_field(attribute_name, input_html_options) + \
    @builder.hidden_field(attribute_name, { :class => attribute_name.to_s + "-alt"})
  end
end

Когда страница загружается с нуля (событие $(document).ready), генерируется следующий html:

<input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" type="text">

Однако, когда страница загружается с turbolinks (из боковой панели навигации, события "page: load" ), отображаемый HTML выглядит следующим образом:

<input class="datepicker optional form-control" id="order_expiration_date" name="order[expiration_date]" type="text">

Конечно, я могу просто добавить класс hasDatepicker в .html.erb или в файл application.js, но мне интересно, можно ли его достичь с помощью функции Rails.

Ответ 1

Наконец я нашел подходящее исправление:

приложение/входы/datepicker_input.rb остается неизменным, обертка работает хорошо.

активы /JavaScripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.js
//= require_tree .

$(document).on("page:load ready", function(){
    $("input.datepicker").datepicker();
});

Поскольку: тип ввода datepicker добавляет класс ".datepicker" к визуализированному HTML, достаточно просто привязать datepicker() ко всем элементам этого класса. Это делает трюк с наименьшим количеством кода.

Важно указать "input.datepicker", так как класс ".datepicker" добавляется как к меткам, так и к тегам ввода.

turbolinks выбрасывает страницу: load event, поэтому я добавил обработчик для обоих случаев - когда страница загружается с turbolinks и когда она загружается с нуля (обновление окна, ссылка сохранена в избранных и т.д.)

Теперь отображается следующий .html.erb, который я ожидаю:

<%= f.input :expiration_date, as: :datepicker, required: false,
    :placeholder => 'Select date', input_html: {class: "form-control"},
    label: "Expiration date: " %>

выход:

<div class="control-group datepicker optional order_expiration_date">
  <label class="datepicker optional control-label" for="order_expiration_date">Expiration date: </label>
  <div class="controls">
    <input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" placeholder="Select date" type="text">
    <input class="expiration_date-alt" id="order_expiration_date" name="order[expiration_date]" type="hidden">
  </div>
</div>

Ответ 2

В simple_form и jquery-ui для меня работает следующее:

JS:

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

форма:

<%= f.text_field :expiration_date, :placeholder => 'Select Date' %>

Итак, без as: :datepicker.

Ответ 3

Попробуйте следующее:

<%= f.text_field :expiration_date, as: :datepicker, :placeholder => 'Select Expiration Date' %>

Javascript

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

app/assets/javascript/application.js должно быть

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