Ruby on Rails 3.1 and jQuery UI images

Question

I\'m using Ruby on Rails (Edge, the development version), and Ruby rvm 1.9.2.

application.js is as follows.

//= require jquery
//= requi         


        

Answer 1

Now that we have Ruby on Rails 3.1.0, this is what worked for me:

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

This directly includes the jQuery UI provided by the jquery-rails gem. But the gem does not provide the theme files. For these, I added a theme directory under vendor/assets/stylesheets, containing:

• the jquery.ui.theme.css file,
• the jQuery UI theme's images directory.

Be sure to keep the theme's images directory with the CSS file! Do not put the image files under vendor/assets/images, or they won't be found by jQuery (which search them under /assets/images).

Finally, changed the app/assets/stylesheets/application.css file to:

/*
*= require_tree ../../../vendor/assets/stylesheets
*= require_tree .
*/

Answer 2

Get the CDN hosted theme from Google:

    = stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css'

Answer 3

To get this to work on both my local dev environment and on Heroku, I did almost the same thing as denysonique suggested, but with a couple of differences at the end:

First, my directory structure looked like this:

vendor/assets/images/
                  jquery_ui/
                      images/
                          ui-bg_flat_0_aaaaaa_40x100.png
                          ...

And second, my symbolic link was:

vendor/assets/images $ ln -s jquery_ui/images images

This is what finally worked for me.

Answer 4

So, here's one way to do it that lacks the downsides of some of the others mentioned here -- it doesn't require you to take apart the theme and put parts of it in different places, it doesn't require symbolic links, and it still allows you to compile the theme css into the one main css as part of the asset pipeline. It does not require a monkey patch like Nash Bridges' suggestion.

However, it does require an additional kind of hacky configuration line. (a one-liner though, basically).

Okay, put your theme in vendor/assets/jquery/ui-lightness/, like you wanted to. (will also work in lib/assets or app/assets, same way).

And

/* =require ui-lightness */

in your application.css. So far so good. Now to get the images to show up right, just add this to config/application.rb:

initializer :add_jquery_ui_asset_base, :group => :all, :after => :append_assets_path do
   config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "jquery-ui", "ui-lightness").to_s
end

For me, it now works in dev, production, and other non-standard asset configs I could think of (like dev with debug=false, which trips up some of the other attempted solutions).

More info at http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/

Answer 5

I've fallen down to doing it the old way:

I put the jQuery folder, containing the theme (unchanged with both CSS and images folder) in the assets/stylesheets folder, and putting in: <%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %> in app/views/layouts/application.html.erb file. This solution is the one with less hazel when I will update jQuery later.

(Thanks for all suggestions on the solution. It is time to conclude.)

Answer 6

Building on a number of other suggestions here, I found a solution that works in my dev environment and in production on Heroku.

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

app/assets/stylesheets/application.css

/*
 *= require_self
 *= require vendor
 *= require_tree .
*/

vendor/assets/stylesheets/vendor.css

 /*
 *= require_self
 *= require_tree .
*/

I added jquery-ui-1.8.16.custom.css and the associated images folder to vendor/assets/stylesheets (I found that unless the images folder was in the same folder as vendor.css it didn't work).

No other changes were necessary for this to work in the Heroku production environment.

Thanks to @denysonique, @softRli and @Paul Cook for their previous answers which helped me.