Datepicker不显示日历

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

但是,当我使用链接从其他页面到达同一页面时,单击表单后不会显示日历。 我必须刷新页面才能使日历可见。

这是我的表单页面:

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

...

我的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' 

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

您可以通过向href或div添加data-no-turbolink来禁用您来自的源页面上的turbolink,这样就可以使它工作。 即

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

有关详细信息,请参阅“选择退出Turbolinks”部分。

[编辑]我认为更好的解决方案是在页面中调用document.ready代码:也可以在coffeescript中更改事件。 这是您可以使用的代码:

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

我在rails 5和Jquery Autocomplete方面遇到了同样的问题。 我的导航栏中有我的搜索框,每次我在我的应用程序中访问不同的页面时,我的弹性搜索自动完成function会中断,这并不会导致与我输入的内容相关联的所有用户。 要解决此问题,我将此添加到我的_nav.html.erb

。 我在搜索框周围的div中尝试过但是,这似乎不起作用,但在导航中工作。 根据Turbolinks页面:使用Turbolinks,这些事件只会响应初始页面加载而不会在任何后续页面更改后触发“。

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) 

最简单的解决方案是使用method: :get in link_to

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