Forum: Ruby on Rails getting started with jQuery rails 3.2

Hi all,

I'm trying to work out how to get started using some jQuery in my rails
app.

rails -v = 3.2.2
ruby -v = 1.9.3-p194

I'm only sporadically a web-developer, and still quite inexperienced
with jQuery especially, so I may be making an obvious mistake.

Essentially, I've done very little after creating a new app, I've learnt
that jQuery is included by default with the gem 'jquery-rails', '2.0.0'.

In my application.js (app/assets/javascripts) I've added the line //=
require jquery-ui

I now want to have a datepicker in one of my forms,  looking at the
jQueryUI website (http://jqueryui.com/demos/datepicker/) I can see that
the class of the text-field has to be "hasDatepicker", and the id
"datepicker"

I've done this in my view like this

<%= f.text_field :game_start_time, :class => :hasDatepicker, :id =>
:datepicker  %>

and also to test like this

<input type= "text" class="hasDatepicker" id="datepicker">

however when I click on the text-field nothing happens, no date picker
appears.

Is there some massively obvious step I'm missing here?

I've looked in the developer tools at the 'scripts' part, and found that
jQuery-ui seems to be loading with the page, I can even search and find
the datepicker fucntion there.

Is there some function I need to add in to say when the user clicks on
this text field, - show the date picker?

Thanks in advance

On May 10, 9:25am, Michael Baldock <li...@ruby-forum.com> wrote:
>
>
> appears.
>
> Is there some massively obvious step I'm missing here?
>
> I've looked in the developer tools at the 'scripts' part, and found that
> jQuery-ui seems to be loading with the page, I can even search and find
> the datepicker fucntion there.
>
> Is there some function I need to add in to say when the user clicks on
> this text field, - show the date picker?
>

You don't need to set the class - jquery-ui does that itself when it
sets up the date picker. You do however need to tell it that you want
a date picker by calling

    $('#datepicker').datepicker()

This tell query "I want a date picker, and make one from the DOM
element with id datepicker"

Typically you do something like

$(function(){
    $('#datepicker').datepicker()
})


in your javascript, which ensures that this only happens once the DOM
is setup properly. If you've decided to follow the defaults and use
coffee script then this would be

$->
  $('#datepicker').datepicker()


Fred