Jquery-ui – Ruby on Rails 3.1 and jQuery UI images

jquery-uiruby-on-rails-3.1

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

Best Answer

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