Rails 4 + simple_form和jQuery UI。 Datepicker不通过turbolinks工作 [英] Rails 4 + simple_form and jQuery UI. Datepicker is not working via turbolinks

问题描述

我有这个表单调用datepicker：

I have this form which calls datepicker:

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

Simple_form包装：
app / inputs / datepicker_input.rb

Simple_form wrapper: app/inputs/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 event），生成以下html：

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

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

然而，当页面加载了turbolinks（从侧导航栏，页面：加载事件），渲染的HTML如下：

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

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

当然，我可以在.html.erb中添加 hasDatepicker 类或者在application.js文件中，但是我想知道是否可以使用Rails功能实现它。

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.

推荐答案

我终于找到了一个合适的修复：

I finally found a suitable fix:

应用/输入/ datepicker_input.rb 保持不变，包装器的效果很好。

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();
});

由于：datepicker输入类型将.datepicker类添加到呈现的HTML中，只需绑定datepicker就足够了（）到具有该类的所有元素。由于.datepicker类被添加到标签和输入标签中，所以指定input.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.

turbolinks抛出一个页面：加载事件，所以我已经为这两种情况添加了处理程序 - 当页面加载了turbolinks，并从零开始加载（窗口刷新，保存在收藏夹中的链接等）

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)

现在以下.html.erb按照我的预期呈现：

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

<%= 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>

这篇关于Rails 4 + simple_form和jQuery UI。 Datepicker不通过turbolinks工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！