Datepicker не отображает календарь

В моем приложении есть форма, в которой я могу выбрать дату из календаря датпикера. Когда я обновляю свою страницу, календарь датпикера появляется при нажатии на форму. Это правильное поведение.

Однако, когда я перехожу на одну страницу с другой страницы, используя ссылку, календарь не появляется после нажатия на форму. Я должен обновить страницу, чтобы сделать календарь видимым.

Вот моя страница формы:

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

Ответы

Ответ 1

У меня была одна и та же проблема. Это проблема turbolinks.

Вы можете отключить turbolinks на исходной странице, из которой вы пришли, добавив данные-no-turbolink в href или div, и это заставит его работать. то есть.

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

Подробнее здесь, в разделе "Отключение от Turbolinks".

[EDIT] Я думаю, что лучшим решением является вызов кода document.ready во время страницы: изменение события также в coffeescript. Вот код, который вы можете использовать:

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

Ответ 2

У меня была такая же проблема с рельсами 5 и автозаполнением JQuery. У меня было окно поиска в моем навигаторе, и каждый раз, когда я переходил на другую страницу в своем приложении, моя автозаполнение с elasticsearch прерывалось бы, это не приводило бы всех пользователей, связанных с тем, что я печатал. Чтобы исправить это, я добавил это в свой _nav.html.erb <nav class="navbar navbar-fixed-top navbar-inverse" data-turbolinks="false">. Я попробовал это в своем div рядом с полем поиска, но, похоже, это не работало, а работало на море. На странице Turbolinks: с Turbolinks эти события будут срабатывать только в ответ на начальную загрузку страницы, а не после изменения любой последующей страницы ".

Ответ 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)

Ответ 4

Самое простое решение для этого - использовать method: :get в link_to

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