Home/ Questions/Q 8839499
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T10:15:02+00:00

I have a Rails 3.2.5 app that is using Twitter Bootstrap. I am trying

  • 0

I have a Rails 3.2.5 app that is using Twitter Bootstrap. I am trying to use the JQuery UI datepicker. I have Googled this for days looking for a solution and can’t find anything. I have a text field in a Rails view that I am trying to use with the JQuery datepicker. However, when I click in the text field, nothing happens.

In my Rails view, I have a simple text_field_tag like so:

<%= text_field_tag 'andrew' %>

In my associated CoffeeScript file:

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

In the Chrome Developer Tools JavaScript Console, I see this error:

Uncaught TypeError: Object [object Object] has no method ‘datepicker’

Now I have determined there is a conflict between JQuery-UI and Bootstrap. In that same JavaScript console, I can do this:

jQuery.noConflict();

and I get

function (a,b){return new e.fn.init(a,b,h)}

Then I can type:

$('andrew'.datepicker();

And I get:

[<input id="andrew" name="andrew" type="text" class="hasDatepicker">]

After this, when I go over to the browser window, clicking in the text field brings up the datepicker calendar just like I want it to.

So how do I get this to work in my code? That is, I am manually resolving the conflict in the JavaScript Console but I can’t get it to work just through my code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like I have this one solved after much pain. I created a new project and slowly, methodically moved over pieces of my application to the new app. I finally uncovered a directory that was only in my project with the problem described above.

    There was a ‘public/assets’ directory with the contents below. I don’t recall creating this directory or putting these files in that directory. Renaming the directory to something different caused my JQuery-UI datepicker to work properly in conjunction with Twitter Bootstrap.

    Here are the contents of public/assets:

    -rw-r--r--  1 andrunix  staff   83360 Sep  3 18:01 application 6fc1172d858485077bbecdb82b96399a.css
-rw-r--r--  1 andrunix  staff   13546 Sep  3 18:01 application-6fc1172d858485077bbecdb82b96399a.css.gz
-rw-r--r--  1 andrunix  staff  100616 Sep  3 18:01 application-990a4cf0df42934fcc4c14aaf88b7ced.js
-rw-r--r--  1 andrunix  staff   35448 Sep  3 18:01 application-990a4cf0df42934fcc4c14aaf88b7ced.js.gz
-rw-r--r--  1 andrunix  staff   83294 Sep  3 18:01 application.css
-rw-r--r--  1 andrunix  staff   13484 Sep  3 18:01 application.css.gz
-rw-r--r--  1 andrunix  staff  100618 Sep  6 20:26 application.js
-rw-r--r--  1 andrunix  staff   35448 Sep  3 18:01 application.js.gz
-rw-r--r--  1 andrunix  staff   13826 Aug 30 17:42 glyphicons-halflings-f6675c325532ec11a984d58e172b8e2a.png
-rw-r--r--  1 andrunix  staff    8777 Aug 30 17:42 glyphicons-halflings-white-13553a5bf21ae3cc374006592488ec64.png
-rw-r--r--  1 andrunix  staff    8777 Aug 30 17:42 glyphicons-halflings-white.png
-rw-r--r--  1 andrunix  staff   13826 Aug 30 17:42 glyphicons-halflings.png
-rw-r--r--  1 andrunix  staff     368 Sep  5 15:00 manifest.yml
-rw-r--r--  1 andrunix  staff    6646 Aug 10 19:57 rails-be8732dac73d845ac5b142c8fb5f9fb0.png
-rw-r--r--  1 andrunix  staff    6646 Aug 10 19:57 rails.png

    If anyone knows how this got created, that would put my mind at ease. Thanks!

    Andrew

    • 0