Ruby on Rails 3.1 and jQuery UI images

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 :-).

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

Solution 2:

Example of a working setup:

    $ cat app/assets/javascripts/application.js

    //= require jquery
    //= require jquery-ui


    $ cat app/assets/stylesheets/application.css

    /*
     *= require vendor
     *
     */


    $ cat vendor/assets/stylesheets/vendor.css

    /*
     *= require_tree ./jquery_ui 
     *
     */

    vendor/assets/ $ tree
     stylesheets
         vendor.css
             jquery_ui
                      jquery-ui-1.8.13.custom.css
                      ...
     images
        jquery_ui
            ui-bg_flat_0_aaaaaa_40x100.png
            ...

Finally run this command:

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

Enjoy your jQuery UI