rails jquery ui datepicker

Question

I want to add the datepicker widget to one of my select fields. I am currently using rails 3.2.13 with ruby 1.9.3.p325. I also included the 'jquery_datepicker' gem, as well as 'jquery-rails' and 'jquery-ui-rails'

The form code looks as following.

  <div class="field">
    <%= f.label :datum %><br />
    <%= f.text_field :datum , :id => "datepicker" %>
  </div>

The included javascript is:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require dataTables/jquery.dataTables
//= require select2
//= require_tree .


$ ->
  $("#practice_toolkeeper")
    .select2({
         allowClear: true,
         placeholder: 'Select an item'
    })
    .select2('val',$("#toolkeeper_value").val())    

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

which generate HTML

<div class="field">
  <label for="practice_datum">Datum</label><br />
  <input id="datepicker" name="practice[datum]" size="30" type="text" />
</div>

if you select the input field, nothing is happening

sorry but what is use of $ -> in code?? Or it just there for this question ? — SachinGutte
– SachinGutte, Commented Mar 31, 2013 at 8:31
I'm very new to jquery and coffescript, etc.. I don't know it. — HappyHacking
– HappyHacking, Commented Mar 31, 2013 at 8:33

SachinGutte · Accepted Answer · 2013-03-31 09:10:39Z

6

Replace

$("datepicker").datepicker();

with

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

Missing # in selecotr. As datepicker is id of element. You need to use # in selector.

UPDATE

jQuery($)->
 $("#datepicker").datepicker();
 .....

This should work.

Update 2

Suppose you have following content in sample.coffee file -

jQuery ->
 $("#datepicker").datepicker();

You need to compile abouve file with following command -

coffee -c sample.coffee

This will then generate js file with following contents -

(function() {
  jQuery(function() {
    return $("#datepicker").datepicker();
  });

}).call(this);

If you are not familiar well with coffee script, go though http://coffeescript.org/#installation

edited Mar 31, 2013 at 9:10

answered Mar 31, 2013 at 8:16

SachinGutte

7,0655 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

HappyHacking Over a year ago

ok I've changed that, but that had no effect, see my edit above

HappyHacking Over a year ago

not working, but now in firebug I get following error: TypeError: jQuery(...).datepicker is not a function [Break On This Error] return jQuery("#datepicker").datepicker();

HappyHacking Over a year ago

now only the rror message has changed.. TypeError: $(...).datepicker is not a function [Break On This Error] return $("#datepicker").datepicker();

SachinGutte Over a year ago

Can you post the output generated by coffee script ? the code you've mentioned will not run in browser but instead it'll generate javascript that you need to put inside page.

HappyHacking Over a year ago

i don't know how to get the code, but thats the html include <script media="all" src="/assets/practices.js?body=1" type="text/javascript"></script>

Eli · Accepted Answer · 2013-03-31 08:17:16Z

2

You missed the # to select element with id datepicker. It should be

$("#datepicker").datepicker()

answered Mar 31, 2013 at 8:17

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Collectives™ on Stack Overflow

rails jquery ui datepicker

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related