Rails 4 + simple_form 和 jQuery UI.日期选择器无法通过 turbolinks 工作 [英] Rails 4 + simple_form and jQuery UI. Datepicker is not working via turbolinks

问题描述

我有这个调用日期选择器的表单:

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

Simple_form 包装器:app/inputs/datepicker_input.rb

class DatepickerInput  attribute_name.to_s + "-alt"})结尾结尾

当页面从头开始加载时($(document).ready 事件)，生成如下html:

然而，当页面加载 turbolinks 时(来自侧边导航栏，page:load"事件)，呈现的 HTML 如下:

当然，我可以简单地在 .html.erb 或 application.js 文件中添加 hasDatepicker 类，但我想知道是否可以通过 Rails 功能实现它.

解决方案

我终于找到了合适的解决方案:

app/inputs/datepicker_input.rb 保持不变，包装器效果很好.

assets/javascripts/application.js

//= 需要 jquery//= 需要 jquery_ujs//= 需要涡轮链接//= 需要 bootstrap.js//= require_tree .$(document).on("page:load ready", function(){$("input.datepicker").datepicker();});

由于:datepicker 输入类型将.datepicker"类添加到呈现的 HTML 中，因此只需将 datepicker() 绑定到具有该类的所有元素就足够了.它用最少的代码完成了任务.

指定input.datepicker"很重要，因为.datepicker"类被添加到标签和输入标签.

turbolinks 会抛出 page:load 事件，所以我为这两种情况都添加了处理程序 - 当页面使用 turbolinks 加载时，以及从头加载时(窗口刷新、保存在收藏夹中的链接等)

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

<%= f.input :expiration_date, as: :datepicker, required: false,:占位符 =>'选择日期', input_html: {class: "form-control"},标签:有效期:"%>

输出:

<label class="datepicker optional control-label" for="order_expiration_date">过期日期:</label><div class="控件"><input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" placeholder="选择日期" type="text"><input class="expiration_date-alt" id="order_expiration_date" name="order[expiration_date]" type="hidden">

I have this form which calls datepicker:

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

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

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">

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">

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:

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:

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

output:

<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.日期选择器无法通过 turbolinks 工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！