Rails 3.1 and jquery-ui assets

This was asked in another question, but none of the solutions appear to work for me in 3.1rc1.

I'm trying to use the new assets stuff in rails 3.1 - I have the files:

./vendor/assets/stylesheets/jquery-ui-1.8.13.custom.css
./vendor/assets/javascripts/jquery-ui-1.8.13.custom.min.js

I then added:

//= require jquery-ui to app/assets/javascripts/application.js
*= require jquery-ui to app/assets/stylesheets/application.css

The jquery-ui javascript file loads just fine, but the css file says:

Sprockets::FileNotFound (couldn't find file 'jquery-ui'
     (in /home/xanview2/xancar/app/assets/stylesheets/application.css):6):

Any ideas?

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

This is a great article to read about Rails 3.1's asset pipeline and jQuery UI: JQuery-UI css and images, and Rails Asset Pipeline

You might have more luck with the jquery-ui-rails gem (see announcement), which packages the jQuery UI JavaScripts, stylesheets and images as assets for you.

This topic comes up a lot, and now that a significant amount of time has passed, things may be different.

In Rails 3.1.2, I found something that works without symbolic links. Follow the steps above, but put the images for the theme right next to the jquery-ui-xxx.css file in an images/ folder. This saved me quite a few headaches.

Yes, this would mean the images would reside in a stylesheets/ folder in vendor/assets, but it works and it is quick to do.

Have you tried using the rails-asset-jqueryui gem? It vendors jquery-ui and the standard themes (currently v1.8.16) and makes them available via the asset pipeline. The following example calls for the Smoothness theme.

Gemfile:

....
gem 'rails-asset-jqueryui'
...

app/assets/javascripts/application.js:

...
//= require jqueryui
...

app/assets/stylesheets/application.css:

...
= require smoothness
...

If you're using the jquery-ui-rails gem:

application.css

/*
 *= require jquery.ui.all
 */

application.js

//= require jquery.ui.all

It seems to me that a lot of confusion can be avoided by keeping these library assets out of assets/javascripts and assets/stylesheets dirs, where sprockets et al have some opinions about what should happen.

Say you've downloaded a customized jquery-ui zipfile from the themeroller. Try this:

1. unpack the zip file into an subdir of an assets dir, something like

   vendor/assets/jquery-ui-1.8.23.custom
   

2. in application.rb add:

   config.assets.paths << Rails.root.join('vendor', 'assets', 'jquery-ui-1.8.23.custom').to_s
   

3. add manifest files in the usual places:

   vendor/assets/javascripts/jquery-ui.js:

   //= require_tree ../jquery-ui-1.8.23.custom
   

   vendor/assets/stylesheets/jquery-ui.css:

   *= require_tree ../jquery-ui.1.8.23.custom
   

4. in config/environments/production.rb, add (referring to manifest filenames):

   config.assets.precompile += %w(jquery-ui.js jquery-ui.css)
   

5. in views:

   <%= stylesheet_link_tag 'jquery-ui' %>
   <%= javascript_include_tag 'jquery-ui' %>
   

if you use this:

https://github.com/carlhoerberg/sprockets-urlrewriter

i believe you can just dump the whole shebang in a directory and require the css file... it will smoothly rewrite the relative urls.

you just have to install the gem and add a config line to application.rb