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'
});

И гемфайл:

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'

ruby-on-rails datepicker turbolinks
person Mahdi    schedule 23.05.2013    source источник
comment
Похоже, он пытается выполнить привязку до того, как DOM будет полностью построен. Попробуйте $(document).ready -› в вашем coffeescript.   -  person Tuan    schedule 24.05.2013
comment
@Tuan $ -> — это сокращение для $(document).ready -> (en.wikipedia.org/wiki/CoffeeScript (примеры ))   -  person MrYoshiji    schedule 24.05.2013
comment
О, спасибо, приятно знать.   -  person Tuan    schedule 24.05.2013

Ответы (4)


arrow_upward
12
arrow_downward

Я столкнулся с той же проблемой. Это проблема турболинков.

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

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

Подробнее см. здесь в разделе «Отказ от использования Turbolinks».

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

$(document).on 'ready page:load', -> $('.date').datepicker({
    format: 'dd-mm-yyyy'
    autoclose: true
    todayHighlight: true
    language: 'fr'
});
person staxim    schedule 25.07.2013
comment
Спасибо, оба решения отлично работали в моей среде разработки. Однако в моей производственной среде (я использую Heroku) у меня все еще есть проблема. - person Mahdi; 03.08.2013
comment
Я имею в виду, что у меня проблема с использованием решения со сценарием кофе. - person Mahdi; 03.08.2013
comment
Хм. Я также использую heroku для производства, и я выбрал решение coffeescript ... оно работает для меня, и мой проект настроен очень похоже на ваш. Я видел некоторые различия между средами разработки и производства в том, как загружаются активы, поэтому вы можете перепроверить с помощью firebug, чтобы убедиться, что ваш правильный файл coffeescript загружается. Я не могу придумать другой причины, по которой героку и ваша среда разработки будут вести себя по-разному. - person staxim; 04.08.2013
comment
Действительно, у меня были некоторые проблемы с активами. Итак, я начал проект с нуля, и теперь все в порядке. Спасибо за помощь. - person Mahdi; 26.08.2013
comment
После тестирования многих вещей, включая гем jquery-turbolinks, data-no-turbolink работает нормально, другие решения не работают для всех случаев, отключить было лучше, используя более 1 плагина запроса на странице, большое спасибо xD. - person overallduka; 22.07.2015

arrow_upward
1
arrow_downward

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

person max56    schedule 23.08.2016

arrow_upward
1
arrow_downward

Самое простое решение для этого — использовать method: :get в ссылке_to.

<%= link_to "Create New Form", sampleform_path, method: :get %>
person Community    schedule 18.11.2017

arrow_upward
0
arrow_downward

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

Виджет выбора даты пользовательского интерфейса jQuery добавляет общий элемент к телу, который, как он ожидает, никогда не покинет страницу, но 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)
person Loqman    schedule 04.05.2017