Why datepicker does not show up in Rails 3 form

I can't figure out why jQuery datepicker doesn't show up, even though I got jQuery running on my app. Here is what I did:

I got a Rails form that includes

  <div id="bo开发者_高级运维rn_in">
   <%= f.text_field :born_in %><br />
   </div>

I included jQuery, jQuery-UI, CSS in head of my application.html.erb

<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" %>

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js",
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" %>     

I also have application.js, which shows that my selector is not nil:

alert($("#born_in").length)  

returns 1

I have tried:

$("#born_in").datepicker("show")

but it doesn't show anything. So why I don't see datepicker()? Is there a bug with datepicker for this version of jquery-UI? How should I test if this function is included in my app?

Thank you.

was it initialized before hand? as in, did you call

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

some where before that code? if not, you don't need the "show", just run the method with no parameters.

Rails decides it likes to prepend a form input with the controller name in the id. For example, my controller name was "Testjqueryui" and in the _form partial, the following (much like yours) was generated:

<%= f.text_field :date %>

The generated HTML (after the embedded ruby is run) has the id of: "testjqueryui_date".

So, my suggestion would be to check the id of the field that's generated, as it likely has the controller's name prepended.

I put this in the application.js file:

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

Hope this helps!

You just have to use a jQuery selector to find all the fields that you want displayed as datepickers. One way to do it is to give a particular css class to the datepicker fields, like this:

<div id="born_in">
    <%= f.text_field :born_in, :class => "date" %>
</div>

And then, in your application.js file (or where you want), just write:

$(function() {
    $('input.date').datepicker();
});

You can also use the id of the particular element instead of a css class. You know the requirements. Hope this is useful.