Getting started with jQuery rails 3.2

Rails
1

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 (Datepicker | jQuery UI) 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

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

2

On May 10, 9:25am, Michael B. [email protected] 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