Question

I have rails 3.2.1 and to test JQuery UI, i want display a DatePicker. So, in the “new.hmtl.erb” page i’ve put the following tag:

<p>Date: <input type="text" id="datepicker" /></p>

In the project.js.coffee (the “new” view page is rendered by the project controller) i’ve write:

$( "#datepicker" ).datepicker();

Why the DatePicker doensn’t show up?

In the source code of new page i’ve:

<script src="/assets/projects.js?body=1" type="text/javascript"></script>

that contains:

(function() {
  $("#datepicker").datepicker();
 }).call(this);

I must include some gems? In the application.js i have:

//= require jquery
//= require jquery_ujs
//= require_tree .

Thanks

Answer 1

Part of the code that will initialize your UI object goes to the page in you case new.html.erb. You add it on bottom as:

<script>
  $(document).ready(function() {
    $( "#datepicker" ).datepicker();
  });
</script>

This means when page is loaded it will initialize your input object. In case you need this part of the code to be available trough many pages you add this code in application.html.erb layout. More about layouts you can reads on Rails Guide pages.

EDIT

For educational purposes here are additional comments:
If you want to put code in application.js you can do following:

function setDatePicker() {
  $( "#datepicker" ).datepicker();
}

and then do

<script>
  $(document).ready(function() {
    setDatePicker();
  });
</script>

If you want code that will execute when application.js is loaded you just put it there without wrapping it in function (not advised). It will execute when application.js is loaded but it will not work since it can trigger (and probably will) before you DOM is loaded. So always use jquery’s .ready.