How do I add jquery-ui to a Ruby on Rails 3.1 app?

Question

I have added //=require jquery-ui to my application.js file and that seems to give me the javascript but I can\'t seem to get the stylesheets to be included. If

Answer 1

jquery-rails no longer has jquery-ui as part of its assets. You should use gem 'jquery-ui-rails' for that.

Furthermore, to find out where an asset is coming form in rails you can do the following:

paths = Rails.application.config.assets.paths
for path in paths do
  puts "Found in: #{path}" if Dir.glob("#{path}/*").grep(/jquery-ui/).present?
end

This should make it easy to find the asset.

Answer 2

You can use google CDN, to add the css theme inside the head section of your app. Simply add this application.html.haml under the %head section(or the same thing translated to erb).

The css theme

%link{:href => "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-lightness/jquery-ui.css", :rel => "stylesheet", :type => "text/css"}

If you want the jquery-ui minified.

%script{:src => "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"}

Answer 3

if you include 'jquery-rails' in Gemfile jquery-ui will be included requiring this in application.js:

//= require jquery-ui.min

if you run in Console: Rails.application.config.assets.paths you will get all paths Rails will look into for assets. In my case for instance:

- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/app/assets/images
- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/app/assets/javascripts
- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/app/assets/stylesheets
- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/vendor/assets/javascripts
- /Users/aldo/Satio/Desarrollo/rails/subaquaclub/vendor/assets/stylesheets
- /Users/aldo/.rvm/gems/ruby-1.9.2-p290@subaquaclub31/gems/jquery-rails-1.0.13/vendor/assets/javascripts

See the last line ? if you check in there you will find jquery-ui so there you go.

Answer 4

Just remember //= require jquery.ui.all needs to be after //= require_tree .

Wasted a lot of my time because of this as most of Jquery UI functionalities won't work.

Answer 5

denysonique has the answer in this question as pointed out by epochwolf in the comments.

Rails 3.1 and jquery-ui assets

Answer 6

Perhaps it's easier to use the jquery-ui-rails gem (see announcement). It packages everything up so things "just work".