9

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'
TheLethalCoder
  • 6,668
  • 6
  • 34
  • 69
Mahdi
  • 75
  • 1
  • 13
  • Sounds like it's trying binding before the DOM is completely build. Try $(document).ready -> on your coffeescript. – Tuan May 23 '13 at 21:59
  • 1
    @Tuan `$ ->` is a shortcut for `$(document).ready ->` (http://en.wikipedia.org/wiki/CoffeeScript (Exemples)) – MrYoshiji May 23 '13 at 22:06

4 Answers4

12

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'
});
staxim
  • 1,328
  • 14
  • 15
  • Thank you, both solutions worked just fine in my development environment. However, in my production environment (I use Heroku), I still have the issue. – Mahdi Aug 03 '13 at 11:44
  • I mean I have the issue using the solution with coffee script. – Mahdi Aug 03 '13 at 12:54
  • Hmm. I'm also using heroku for production and I went with the coffeescript solution.. it's working for me, and my project is setup very similarly to yours. I've seen some differences between my dev and prod environments in how assets are loaded, so you may want to double-check with firebug to be sure that your correct coffeescript file is being loaded. I can't think of another reason that heroku and your dev environment would behave differently. – staxim Aug 03 '13 at 22:09
  • Indeed, I had some troubles with assets. So I started a project from scratch, and now everything is fine. Thank you for your help. – Mahdi Aug 26 '13 at 11:46
  • After test a lot of things including the `jquery-turbolinks` gem the `data-no-turbolink` works fine, others solutions not work for all cases, disable was better using more than 1 query plugin in page, thanks much xD. – overallduka Jul 22 '15 at 17:11
1

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

max56
  • 101
  • 1
  • 3
1

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

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

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)
Loqman
  • 1,487
  • 1
  • 12
  • 24