Datepicker zeigt den Kalender nicht

Question

Ich habe in meiner Anwendung ein Formular, wo ich ein Datum aus einem Datepicker Kalender auswählen kann. Wenn ich meine Seite aktualisiere, wird beim Klicken auf das Formular der Kalender angezeigt. Das ist das richtige Verhalten.

Wenn ich jedoch dieselbe Seite von einer anderen Seite über einen Link erreiche, wird der Kalender nicht angezeigt, nachdem ich auf das Formular geklickt habe. Ich muss die Seite aktualisieren, um den Kalender sichtbar zu machen.

Hier ist meine Form Seite:

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

Mein JavaScript-Code:

# app/assets/javascripts/reservations.js.coffee 
$ -> $('.date').datepicker({ 
    format: 'dd-mm-yyyy' 
    autoclose: true 
    todayHighlight: true 
    language: 'fr' 
}); 

Und die 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

ich das gleiche Problem auftritt. Dies ist ein Turbolinkproblem.

Sie können Turbolinks auf der Quellseite, aus der Sie kommen, deaktivieren, indem Sie daten-no-turbolink zum href oder div hinzufügen, und dies wird funktionieren. das heißt

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

Weitere Details here unter dem Abschnitt "aus Turbolinks Opting".

[EDIT] Ich denke, die bessere Lösung ist, Ihren document.ready Code während der Seite aufzurufen: Event auch in coffeescript ändern. Hier ist der Code, den Sie verwenden können:

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

Answer 2

Ich hatte das gleiche Problem mit Schienen 5 und Jquery Autocomplete. Ich hatte meine Suchbox in meiner Navbar und jedes Mal, wenn ich auf eine andere Seite in meiner App ging, würde meine automatische Vervollständigung mit elasticsearch brechen, das bringt nicht alle Benutzer in Verbindung mit, was ich tippte. Um das zu beheben, habe ich das zu meinem _nav.html.erb <nav class="navbar navbar-fixed-top navbar-inverse" data-turbolinks="false"> hinzugefügt. Ich versuchte es in meinem div nur um das Suchfeld, aber das schien nicht zu funktionieren, aber arbeitete im Nav. Per der Turbolinks Seite: Mit Turbolinks, feuern diese Ereignisse nur als Reaktion auf die erste Seite Last nicht nach jeder nachfolgenden Seite Änderungen“

Answer 3

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

Das Widget jQuery UI Datumsauswahl anhängt ein. Das Element shared, das erwartet wird, wird die Seite nie verlassen, aber Turbolinks entfernt dieses geteilte Element, wenn es neu rendert. Wir erfüllen diese Erwartung, indem wir das geteilte Element von der Seite entfernen, bevor Turbolinks die Seite zwischenspeichert und erneut anfügt, bevor Turbolinks die Seite tauscht neuer Körper während des Renderings

Darüber hinaus würde die Rückkehr zu der zwischengespeicherten Version einer Seite, die zuvor über Datumsauswahlelemente verfügt, dazu führen, dass diese Datumsauswahl nicht erneut initialisiert wird. Wir beheben dieses Problem, indem wir alle initialisierten Datumsauswahleingaben auf der Seite finden und die Destroy-Methode des Datumsauswahlprogramms aufrufen, bevor Turbolinks die Seite zwischenspeichert.

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

Die einfachste Lösung hierfür ist die method: :get im

link_to verwenden

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