日期选择器未显示日历

Question

我在我的应用程序中有一个表单，可以从日期选择器日历中选择日期。当我刷新页面时，点击表单时日期选择器日历会出现。这是正确的行为。

但是，当我通过链接从另一个页面到达同一页面时，点击表单后，日历不会出现。我必须刷新页面才能使日历可见。

以下是我的表单页面：

# app/views/reservations/_form.html.erb
...

      <div class="row reservations">
        <div class="span2 field">
          <%= f.label :mydate %><br />
          <%= f.text_field :mydate, class: "input-append date datepicker", value: Date.today.strftime('%d-%m-%Y') %>
        </div>
...

我的JavaScript代码：

# app/assets/javascripts/reservations.js.coffee
$ -> $('.date').datepicker({
    format: 'dd-mm-yyyy'
    autoclose: true
    todayHighlight: true
    language: 'fr'
});

还有Gemfile:

source 'https://rubygems.org'

ruby "2.0.0"

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0.beta1'
gem 'bootstrap-sass', '2.3.1.0'
gem 'bcrypt-ruby', '3.0.1'
gem 'protected_attributes'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'bootstrap-datepicker-rails'
gem 'rails-i18n'

gem 'pg'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 4.0.0.beta1'
  gem 'coffee-rails', '~> 4.0.0.beta1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', platforms: :ruby

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.0.1'

- Mahdi

---

听起来好像是在 DOM 完全构建之前就尝试绑定了。请在你的 Coffeescript 中尝试使用 $(document).ready ->。 - Tuan

@Tuan $ -> 是 $(document).ready -> 的一种快捷方式 (http://en.wikipedia.org/wiki/CoffeeScript (Exemples)) - MrYoshiji

Answer 1

我遇到了同样的问题。这是一个turbolinks的问题。

您可以在源页面上通过将data-no-turbolink添加到href或div来禁用turbolinks，这将解决问题。例如：

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %> 

查看更多细节 此处，位于“退出Turbolinks”部分。

[编辑] 我认为更好的解决方案是在coffeescript中也在page: change事件期间调用你的document.ready代码。这是您可以使用的代码：

$(document).on 'ready page:load', -> $('.date').datepicker({
    format: 'dd-mm-yyyy'
    autoclose: true
    todayHighlight: true
    language: 'fr'
});

- staxim

---

谢谢，两种解决方案在我的开发环境中都很好用。然而，在我的生产环境中（我使用Heroku），我仍然有这个问题。 - Mahdi

我的意思是，我在使用咖啡脚本的解决方案时遇到了问题。 - Mahdi

嗯，我也在生产环境中使用Heroku，并选择了Coffeescript解决方案...它对我很有效，而且我的项目设置与你的非常相似。我注意到我的开发和生产环境在加载资源方面存在一些差异，因此您可能需要使用Firebug仔细检查确保正确加载了您的Coffeescript文件。我想不出其他原因导致Heroku和您的开发环境表现不同。 - staxim

的确，我在资产方面遇到了一些麻烦。所以我从头开始启动了一个项目，现在一切都很好。谢谢你的帮助。 - Mahdi

经过测试了很多东西，包括 jquery-turbolinks gem，data-no-turbolink 可以正常工作，其他解决方案并不适用于所有情况。在页面中使用多个查询插件时，禁用是更好的选择。非常感谢 xD。 - overallduka

Answer 2

我在Rails 5和Jquery Autocomplete中遇到了同样的问题。我的搜索框在导航栏中，每次我在应用程序中跳转到不同的页面时，我的elasticsearch自动完成会出现问题，即不能带出与我输入内容相关的所有用户。为了解决这个问题，我在我的_nav.html.erb中添加了以下代码：<nav class="navbar navbar-fixed-top navbar-inverse" data-turbolinks="false">。我尝试将其放在搜索框周围的div中，但似乎没有起作用，但是在导航栏中起作用了。根据Turbolinks页面的说明：使用Turbolinks，这些事件只会在初始页面加载后触发，而不是在任何后续页面更改后触发。

- max56

Answer 3

最简单的解决方法是在 link_to 中使用 method: :get。

<%= link_to "Create New Form", sampleform_path, method: :get %> 

- user7516728

Answer 4

https://github.com/turbolinks/turbolinks/issues/253

jQuery UI日期选择器小部件将共享元素附加到页面上，它期望该元素永远不会离开页面，但是Turbolinks在重新渲染时会删除该共享元素。我们通过在Turbolinks缓存页面之前从页面中删除共享元素，并在Turbolinks在渲染过程中交换新的主体之前再次附加它来满足这一期望。

此外，返回先前具有日期选择器元素的页面的缓存版本将导致这些日期选择器不再被初始化。我们通过查找页面上所有已初始化的日期选择器输入并在Turbolinks缓存页面之前调用日期选择器的销毁方法来解决此问题。

document.addEventListener "turbolinks:before-cache", ->
  $.datepicker.dpDiv.remove()

  for element in document.querySelectorAll("input.hasDatepicker")
    $(element).datepicker("destroy")

document.addEventListener "turbolinks:before-render", (event) ->
  $.datepicker.dpDiv.appendTo(event.data.newBody)

- Loqman