Datepickerにカレンダーが表示されない

Question

私のアプリケーションでは、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' 

Answer 1

私は同じ問題を経験していました。これはターボの問題です。

ターボリンクを無効にするには、送信元ページでhrefまたはdivにdata-no-turbolinkを追加します。これにより、ターボリンクが機能します。すなわち、

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

詳細については、hereの「ターボリンクのオプトアウト」セクションを参照してください。

[編集]もっと良い解決策は、ページ中にdocument.readyコードを呼び出すことです：変更イベントはcoffeescriptでも。

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

Answer 2

私はレール5とJquery Autocompleteで同じ問題がありました。ナビゲーションバーに検索ボックスがあり、アプリ内の別のページに移動するたびに、elasticsearchでオートコンプリートを実行すると、入力した内容に関連するすべてのユーザーが表示されなくなります。修正するには、_nav.html.erb <nav class="navbar navbar-fixed-top navbar-inverse" data-turbolinks="false">に追加しました。私は検索ボックスの周りの私のdivでそれを試したが、それは動作するように見えなかったが、navで働いた。 Turbolinksのページあたり：Turbolinksと、これらのイベントは、唯一の負荷はなく、後続のページの変更後に」初期ページに反応して発火する

Answer 3

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

はjQueryのUI日付ピッカーウィジェットが追加されます。 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) 

Answer 4

このための最も簡単な解決策は、のlink_to

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