17

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 I understand it right they should go in vendor/stylesheets but how do I get them to be included?

coreyward
  • 77,547
  • 20
  • 137
  • 166
chris
  • 505
  • 2
  • 4
  • 17

8 Answers8

12

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

Jo Liss
  • 30,333
  • 19
  • 121
  • 170
11

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"}
daniel
  • 9,732
  • 7
  • 42
  • 57
  • Yeah that's an option but I'd like to find out how to include the files from vendor/assets/stylesheets if that indeed is the way it's intended to be. – chris Jun 04 '11 at 19:57
  • Download jqeury-ui.css to public/stylesheets/ and do stylesheet_link_tag("jquery-ui") you can also put it in other directories, just change the path. – daniel Jun 04 '11 at 20:13
  • Yes that works as well but can't it be combined into application.css like the js is though? I'm new to rails so please excuse my ignorance. – chris Jun 04 '11 at 21:13
  • You can also include all styles in the stylesheets directory using :all as the source: stylesheet_link_tag :all – daniel Jun 05 '11 at 20:23
  • I tried it but the file in vendor/assets/stylesheets doesn't seem to be included. – chris Jun 05 '11 at 21:02
  • stylesheet_link_tag :all, :recursive => true will search under public/stylesheets/* if you want vendor assets include the whole path /vendor/assets/stylesheets but I don't understand why put them there, just put them in public/stylesheets/vendor/jquery-ui.css and use the recursive :true – daniel Jun 06 '11 at 13:32
8

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.

bbonamin
  • 30,042
  • 7
  • 40
  • 49
Aldo
  • 346
  • 1
  • 4
  • 13
  • Awesome. Worked great. Since I don't need jQuery UI everywhere, I added the require line above to my controller's js file (Rails 3.1 e.g. projects.js.coffee) – Ryan May 22 '12 at 01:37
6

quote from the jquery-rails manual:

In order to use the themed parts of jQuery UI, you will also need to supply your own theme CSS. See jqueryui.com for more information.

So, you have to include or style them yourself! Just include the theme's .css in the header of your page. In Rails 3 you'd put the css in public/stylesheets, don't know for Rails 3.1.

Markus
  • 5,667
  • 4
  • 48
  • 64
5

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.

Michael Yagudaev
  • 6,049
  • 3
  • 48
  • 53
5

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.

Sachin Prasad
  • 5,365
  • 12
  • 54
  • 101
2

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

Rails 3.1 and jquery-ui assets

Community
  • 1
  • 1
chris
  • 505
  • 2
  • 4
  • 17
2

If you have jquery-rails on Gemfile, just do: 

//= require jquery-ui

or 

//= require jquery-ui.min

both will work fine. If not, try to update jquery-rails gem

Don't forget the css files, here I followed some articles on that other answer: Ruby on Rails 3.1 and jQuery UI images and got it working by this way:

*= require jquery-ui/jquery-ui.css

this is the path for files:

vendor/assets/stylesheets/jquery-ui/jquery-ui.css 
vendor/assets/images/jquery-ui/images/ (your theme images)
Community
  • 1
  • 1
Gabriel Mazetto
  • 1,090
  • 1
  • 12
  • 23