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 //= require jquery-ui //= require jquery_ujs //= require_tree  

Where is the right place in Ruby on Rails 3.1 to put the jQuery UI theme?

According to Autocomplete fields in Ruby on Rails 3.1 with jQuery UI I should put a jQuery UI theme in vendor/assets/stylesheets folder. That sounds like a smart place to have it, but I don't get it to work :-(.

I managed to get the CSS loaded by putting it in the assets/stylesheets folder, but the images I havn't managed to get loaded.

I could of course be using the old way with just putting the theme in the public/stylesheets/ folder, and using:

<%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.11.custom" %> 

in application.html.erb, but trying to be a modern man, I would rather use the new way of doing tings :-).

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 . */