Using Jquery Datepicker works on one page, not on another, in my rails app

Question

I have a rails application. On two different html pages, I would like to use jquery's datepicker. The first time I use this, it works just fine:

in my html:

<input id="kid_dob" name="kid[dob]" type="text" />

in my javascript:

(function() {
  jQuery(function() {
    return $('#kid_dob').datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: '-16:c'
    })({
      dateFormat: 'yy-mm-dd'
    });
  });

  }).call(this);

(This is actually written in CoffeeScript, the JavaScript that I show above has been processed by rails).

This works fine: the datepicker calendar does appear when I click on the kid_dob text field.

However, on another page I have the html

<input id="reservable_history_start_date" name="reservable_history[start_date]" type="text" />

and the javascript (which is exactly the same except for kid_dob being replaced by reservable_history_start_date )

(function() {
  jQuery(function() {
    return $('#reservable_history_start_date').datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: '-16:c'
    })({
      dateFormat: 'yy-mm-dd'
    });
  });

}).call(this);

And yet, in this second instance, the datepicker calendar does not appear. Also, when I use the options inspector, in the first working case, the scrollover text is input#kid_dob.hasDatepicker , but in the not working case, the scrollover text is simply input#reservable_history_start_date (with no hasDatepicker ).

Also, here are the require statements from my application.js file

//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require bootstrap
//= require_tree .

What am I doing wrong?! Must be something different between the two html files, but I'm at a loss. Any hints are much appreciated.

This is all part of a rails 4.0.0 application, the output of ruby -v is ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux] I am using ubuntu 10.04 Lucid Lynx.

Thanks in advance!

Answer 1

Maybe you can try adding below functions to your code,because the datepicker may not be loading.

$(document).on('page:load')
$(document).ready();

Answer 2

I worked it out. Turns out, the error console (ctrl+shift+j) is incredibly helpful. There was a null string being passed to getElementById() , from some code inside jquery-rails . By methodically removing every line in my application.js file, until all I had was the \\\\= require jquery-rails line left, I could get that error to go away. Then I slowly added one library at a time, until I found what was wrong (as I was sure that jquery-rails couldn't have such a simple bug). Turns out that my version of jquery-rails and bootstrap had a clash - so I upgraded my version of bootstrap , and the getElementByID() problem was fixed, and now datepicker can work in both instances.