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'

Answer 1

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

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

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

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

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

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

Answer 2

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

Answer 3

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)

Answer 4

最简单的解决方案是使用link_to

中的method: :get

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

Datepicker不显示日历

4 个答案: