9

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

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

这是我的表单页面：

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

4 回答 4

12

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

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

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

在此处查看更多详细信息，在“选择退出 Turbolinks”部分下。

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

$(document).on 'ready page:load', -> $('.date').datepicker({
    format: 'dd-mm-yyyy'
    autoclose: true
    todayHighlight: true
    language: 'fr'
});
于 2013-07-25T15:27:20.603 回答
1

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

于 2016-08-23T21:04:51.173 回答
1

最简单的解决方案是使用method: :getlink_to

<%= link_to "Create New Form", sampleform_path, method: :get %>
于 2017-11-18T06:08:47.647 回答
0

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)
于 2017-05-04T21:13:02.140 回答