Datepicker does not display the calendar

Question

I have in my application a form where I can chose a date from a datepicker calendar. When I refresh my page, the datepicker calendar appears when clicking the form. This is the correct behaviour.

However when I reach the same page from another page using a link, the calendar does not appear after clicking the form. I have to refresh the page in order to make the calendar visible.

Here is my form page:

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

My javascript code:

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

And the 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

I was experiencing the same issue. This is a turbolinks problem.

You can disable turbolinks at the source page that you're coming from by adding data-no-turbolink to the href or div, and this will get it working. i.e.

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

See more details here, under the "Opting out of Turbolinks" section.

[EDIT] I think the better solution is to call your document.ready code during the page:change event also in coffeescript. Here is the code you can use:

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

Answer 2

I had the same issue with rails 5 and Jquery Autocomplete. I had my search box in my navbar and every time i went to a different page in my app my autocomplete with elasticsearch would break, that is not bring up all users associated with what i was typing. To fix I added this to my _nav.html.erb <nav class="navbar navbar-fixed-top navbar-inverse" data-turbolinks="false">. I tried it in my div just around the search box but, that didn't seem to work but, worked in the nav. Per the Turbolinks page: With Turbolinks, these events will fire only in response to the initial page load—not after any subsequent page changes".

Answer 3

The simplest solution for this is use the method: :get in the link_to

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

Answer 4

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

The jQuery UI date picker widget appends a shared element to the body which it expects will never leave the page, but Turbolinks removes that shared element when it rerenders. We satisfy that expectation by removing the shared element from the page before Turbolinks caches the page, and appending it again before Turbolinks swaps the new body in during rendering.

Additionally, returning to the cached version of a page that previously had date picker elements would result in those date pickers not being initialized again. We fix this issue by finding all initialized date picker inputs on the page and calling the date picker's destroy method before Turbolinks caches the page.

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)