Alex Rivera | Logout

Ruby on Rails 3.1 and jQuery UI images

Asked 2011-05-18T17:16:31.203
56

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

jquery-ui ruby-on-rails-3.1
Edit
Report

3 Answers

26

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 .
*/
answered 2011-09-13T08:53:18.980
0

I think you can put ui styles in app/assets/stylesheets. Do something like this:

# app/stylesheets/application.css.scss
//= require_self
//= require libraries/jquery-ui
//= require_tree .

In 'jquery-ui' stylsheet, something like this:

.class{
  background: url(/assets/jquery-ui/ui-icons_222222_256x240.png)
}
answered 2011-05-20T04:23:37.093
0

What worked for me was instead of having the jQuery theme CSS file in app/assets/stylesheets/ and the images in app/assets/images/. I placed them into app/assets/images/images/, and it worked. It's kind of a hack, but it seems to work at this point with minimal fudging and without modifying the CSS files.

answered 2011-11-14T09:12:58.677

Your Answer