Datepicker 不显示日历答案

【问题标题】：Datepicker does not display the calendarDatepicker 不显示日历
【发布时间】：2013-05-19 10:31:20
【问题描述】：

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

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

这是我的表单页面：

# 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'

【问题讨论】：

听起来像是在 DOM 完全构建之前尝试绑定。在您的咖啡脚本上尝试 $(document).ready ->。
@Tuan $ -> 是$(document).ready -> 的快捷方式（en.wikipedia.org/wiki/CoffeeScript（示例））
哦，谢谢，很高兴知道。

标签： ruby-on-rails datepicker turbolinks

【解决方案1】：

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

您可以通过将 data-no-turbolink 添加到 href 或 div 来禁用您来自的源页面的 turbolink，这将使其正常工作。即

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

查看更多详情 here，在“退出 Turbolinks”部分。

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

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

【讨论】：

谢谢，这两种解决方案在我的开发环境中都运行良好。但是，在我的生产环境中（我使用 Heroku），我仍然有这个问题。
我的意思是我在使用带有咖啡脚本的解决方案时遇到了问题。
嗯。我也在使用heroku进行生产，我使用了coffeescript解决方案。它对我有用，我的项目设置与你的非常相似。我已经看到我的 dev 和 prod 环境在资产加载方式方面存在一些差异，因此您可能需要仔细检查 firebug 以确保正在加载正确的咖啡脚本文件。我想不出 heroku 和您的开发环境会表现不同的另一个原因。
确实，我在资产方面遇到了一些麻烦。所以我从头开始了一个项目，现在一切都很好。感谢您的帮助。
在测试了很多东西后，包括jquery-turbolinks gem data-no-turbolink 工作正常，其他解决方案不适用于所有情况，禁用页面中使用超过 1 个查询插件会更好，非常感谢 xD .

【解决方案2】：

我在使用 rails 5 和 Jquery Autocomplete 时遇到了同样的问题。我的导航栏中有我的搜索框，每次我进入我的应用程序中的不同页面时，我的弹性搜索自动完成功能都会中断，这不会显示与我输入的内容相关的所有用户。为了解决这个问题，我将它添加到我的 _nav.html.erb <nav class="navbar navbar-fixed-top navbar-inverse" data-turbolinks="false">。我在搜索框周围的 div 中尝试了它，但这似乎不起作用，但在导航中起作用。根据 Turbolinks 页面：使用 Turbolinks，这些事件只会在初始页面加载时触发，而不是在任何后续页面更改之后触发。

【讨论】：

【解决方案3】：

最简单的解决方案是在链接地址中使用method: :get

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

【讨论】：

【解决方案4】：

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

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

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

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)

【讨论】：