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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Henrik Ormåsen
  • 870
  • 1
  • 9
  • 18
  • possible duplicate of [Rails 3.1 and jquery-ui assets](http://stackoverflow.com/questions/6133818/rails-3-1-and-jquery-ui-assets) – mbillard Nov 22 '11 at 17:15

18 Answers18

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 .
*/
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Romain Champourlier
  • 2,360
  • 24
  • 29
19

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

denysonique
  • 16,235
  • 6
  • 37
  • 40
  • please be careful of posting exact duplicate "boilerplate" answers. We tend to get flags for them being potential spam. Try and tailor your answers to fit the OP's question. Thanks. – Kev Jun 06 '11 at 23:40
  • 4
    I just wanted to help by providing a full solution to people which mostly get to those two pages via Google, And to save their time. – denysonique Jun 06 '11 at 23:49
  • please don't take my comment the wrong way, your answer looks great, but "boilerplate" answers tend to attract flags. Just mix things up a bit. Cheers. – Kev Jun 06 '11 at 23:52
  • @npiv - please see: http://stackoverflow.com/questions/6133818/rails-3-1-and-jquery-ui-assets/6259026#6259026 . All I'm saying is that copy and paste answers can be viewed negatively by the community and flagged as spammy. This and the other answer were flagged as such. You should tailor answers to match the question. – Kev Aug 21 '11 at 20:38
  • @denysonique I think you meant to link to vendor/assets/images/jquery_ui from within vendor/assets/*stylesheets*/jquery_ui – Kevin Davis Jan 22 '12 at 02:16
  • Jared: I just dropped an 'imaged' directory under vendor/assets/stylesheets/jquery_ui with the jquery ui images – Kevin Davis Jan 22 '12 at 02:17
  • 2
    How are you -1ers deploying? I'm pretty sure the symlinks remain. And why would you vote down because something doesn't work in your setup? The minus should go to jqui or the asset pipeline IMO :P – mraaroncruz Jan 31 '12 at 12:58
7

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Henrik Ormåsen
  • 870
  • 1
  • 9
  • 18
  • 1
    From my quick searching it seems to have been an issue with asset pipeline and not serving images out of the vendor/assets directory. That being said, the way jquery-ui's CSS works, it's always going to be looking in the "images/" for files rather than "assets/". This is further complicated by the fact that it's a relative directory so it's actually going to hit "assets/images". My quick and dirty fix is to just put the images in "public/assets/images".. its not pretty but works. I'm sure eventually asset pipeline will be made to work correctly with this. – mikeycgto Jul 20 '11 at 20:03
  • I certainly hope this will be resolved soon too. I continually get errors like "Served asset /images/ui-bg_highlight-hard_100_f5f3e5_1x100.png - 404 Not Found" when I have the images in the vendor/ area. – dmonopoly Jul 25 '11 at 23:13
  • 1
    does this work for production? I tried precompiling my assets and this no longer worked. I ended up having to edit the themes css and covert it to sass and change all the images to image-url("...") – Jim Morris Sep 04 '11 at 06:34
  • I would not put anything into public/assets manually, because that's the sprockets compilation cache directory, if you ever run "rake assets:clean" for instance it'll delete it. That dir is meant as a compilation cache only. I'll post a different kinda hacky solution below. – jrochkind Dec 09 '11 at 04:46
6

I like to selectively download jQuery UI JavaScript code so that I can easily upgrade to any future versions and have a light-weight jQuery UI (include needed files only, here progressbar.js).

I have the following setup for the "Dot Luv" jQuery UI theme.

Note:

The JavaScript and CSS files are uncompressed and taken from jquery-ui-1.8.16.custom/development-bundle/ui and jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv respectively, and I rely on sprokets to minify and compress them.

The images are from jquery-ui-1.8.16.custom/development-bundle/themes/dot-luv/images.

Directory Structure:

Directory Structure

app/assets/javascripts/application.js

//= require jquery
//= require jquery-ui/v1.8.16/Core/jquery.ui.core
//= require jquery-ui/v1.8.16/Core/jquery.ui.widget
//= require jquery-ui/v1.8.16/Widgets/jquery.ui.progressbar
//= require jquery_ujs

app/assets/stylesheets/application.css.scss

*= require_self
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.all
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.base
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.core
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.progressbar
*= require jquery-ui/v1.8.16/dot-luv/jquery.ui.theme

config/application.rb

config.assets.paths << File.join(Rails.root,'vendor/assets/images/jquery-ui/v1.8.16/dot-luv/')
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Pratik Khadloya
  • 12,509
  • 11
  • 81
  • 106
5

With Ruby on Rails 3.1.2 I did the following.

#app/assets/javascripts/application.js

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

For the CSS files, I like to do @import instead to have more control over the load order of CSS files. To do this, I have to add the .scss extension to the app/assets/stylesheets/application.css file, and also to all CSS files I want to import, like the jQuery UI CSS file.

#app/assets/stylesheets/application.css.scss

/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*/

@import "jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss";

/* Other css files you want to import */
@import "layout.css.scss";
@import "home.css.scss";
@import "products.css.scss";
....

Then I put everything jQuery UI related in vendor/assets like this:

jQuery UI stylesheet:

vendor/assets/stylesheets/jquery-ui/ui-lightness/jquery-ui-1.8.16.custom.css.scss

jQuery UI images folder:

vendor/assets/images/images

Note that you can create additional folder in the stylesheets path like I did here with "jquery-ui/ui-lightness" path. That way you can keep multiple jQuery themes nicely separated in their own folders.

** Restart your server to load any newly created load paths **

Ryan Bates has some excellent screencasts about the asset pipeline and Sass in Ruby on Rails 3.1, where he shows how to use the @import function in Sass. Watch it here:

Edit: I forgot to mention that this works both locally and on Heroku on the Cedar stack.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
bihlring
  • 51
  • 1
  • 2
5

I know this thread already has a lot of answers but I'm going to throw in what worked best for me.

There is a gem called jquery-ui-themes that includes the default jQuery UI themes already converted to sass using the image-path helper. So you can include the gem and get any of the default themes out of the box just by adding them to your application.css file

If you want to use your own custom theme (as I did) there is a rake task that will automatically convert the CSS file to SCSS and use the image-path helper to find the right path.

aNoble
  • 7,033
  • 2
  • 37
  • 33
  • The documentation for the rake task is on [the Github page](https://github.com/fatdude/jquery-ui-themes-rails#rake-tasks) – aNoble Jul 21 '12 at 02:34
5

There is now a jquery-ui-rails gem (see announcement). It packages the images as assets (and correctly references them from the CSS files) so things Just Work. :-)

Jo Liss
  • 30,333
  • 19
  • 121
  • 170
3

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/

jrochkind
  • 22,799
  • 12
  • 59
  • 74
2

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.

Dominic Sayers
  • 1,783
  • 2
  • 20
  • 26
  • Heroku often adds that little degree of difficulty that ends up wasting an hour or two. Thanks so much for sharing. Much appreciated! – Don Leatham Apr 01 '12 at 05:44
1

There's a proposed fix in Ruby on Rails that makes precompilation of jQuery UI's images work.

(As of 3.1.0rc6, the asset precompiler uses the regular expression /\w+\.(?!js|css).+/ to find things to compile. This misses all the jQuery UI images because their names include dashes and underscores.)

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ed4
  • 2,277
  • 18
  • 18
  • That fix looks accepted for 3.1.1rc1. But I think it only works for precompiling assets; doesn't seem to help in dev mode when they're on-the-fly. – Jay Levitt Sep 25 '11 at 19:15
1

Combining suggestions here is what got things working for me:

Put the jQuery UI theme CSS folder in vendor/assets/stylesheets.

Put vendor.css in vendor/assets/stylesheets:

*= require_tree ./theme-css-name

In production.rb I added this:

config.assets.paths << File.join(Rails.root,'vendor/assets/stylesheets/theme-css-name

That is what it took to get the images to get precompiled and resolve without editing the jQuery UI theme CSS file or moving the images out of the theme CSS folder.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Paul Cook
  • 11
  • 1
1

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.

Community
  • 1
  • 1
gphil
  • 149
  • 2
0

What I did to get everything to work properly is as follows.

1.) Added the CSS to the assets/stylesheets folder

2.) Added the images to the assets/images folder

3.) Removed the paths to all the images in the CSS using find "url(images/" and replace with "" leaving just the image file name.

/* Example: */ .ui-icon { background-image: url(images/ui-icons_222222_256x240.png) ; }
/* Becomes: */ .ui-icon { background-image: url(ui-icons_222222_256x240.png) ; }

Bingo! Everything should work correctly.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Frederick King
  • 9
  • 1
  • 1
    A little hairy solution, since you will have to update the css every time you update or change the theme. The rails creators must have thought about this. It's JQuery we are talking about. Such an important and standard thing, so they must have an easy and elegant solution to this. Thanks anyway for your reply. Nice to see I'm not the only one who are struggling with this. – Henrik Ormåsen May 19 '11 at 09:36
  • 2
    In order to avoid updating the css you could also create app/images/images and put your Jquery-UI images in there. Both image fixing solutions suck though. – Steve Weet May 19 '11 at 11:31
  • 3
    So fare my best solution is to 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. A bit unfashion but it works, and easy to update. – Henrik Ormåsen May 19 '11 at 12:46
  • Steve Weet 's solution worked for me under Rails3.1.1 - although only tested it in dev mode so far :) – Chris Kimpton Nov 03 '11 at 07:32
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)
}
Edison Machado
  • 1,410
  • 19
  • 29
0

Using Ruby on Rails 3.1.1, I simply placed the files as follows. No other changes were required.

  • app/assets/stylesheets/jquery-ui-1.8.16.custom.css
  • app/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png
  • ...
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ben Williams
  • 1
  • 1
    Its not working for me :( - got it working by putting the images in app/assets/images/images/ - as per comments by Steve Weet. – Chris Kimpton Nov 03 '11 at 07:29
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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Misha Slavin
  • 57
  • 1
  • 1
  • 4
0

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'
Jared Beck
  • 16,796
  • 9
  • 72
  • 97
-1

For that moment, I found not a perfect but working a solution.

Assuming you have jQuery UI theme in the /vendor/assets/stylesheets/ folder. Then you have to modify application.css:

/* =require ui-lightness */

and create plugin_assets_monkey_patch.rb in the /config/initializers

Dir[File.join(Rails.root, 'vendor/assets/stylesheets/*/')].each do |dir|
    AppName::Application.config.assets.paths << dir

    index_content = '/*=require_tree .*/'

    index = File.join(dir, 'index.css')
    unless File.exist?(index)
        File.open(index, 'w') { |f| f.puts index_content }
    end
end

index.css in every /vendor/assets/stylesheets/ subfolder guarantees that stylesheets like jquery-ui-1.8.11.custom.css will be compiled (if you require that subfolder).

config.assets.paths ensures that folders like /vendor/assets/stylesheets/ui-lightness/images are visible at the application root scope.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Nash Bridges
  • 2,350
  • 14
  • 19