52

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?

New Alexandria
  • 6,951
  • 4
  • 57
  • 77
Roman Gaufman
  • 1,104
  • 1
  • 13
  • 17

8 Answers8

63

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
  • 6
    Just adding //= require jquery-ui solved it for me (as i have "gem 'jquery-rails'" in Gemfile), but your solution will work if someone have customized jquery-ui (at least I think so). – Dalibor Filus Jul 13 '11 at 23:38
  • Works perfectly for me, have you run the $ ln -s command? If you still have a problem please describe it in a new thread and maybe I or someone else will help you. – denysonique Jul 21 '11 at 08:09
  • 2
    If you do this way, you will need to edit the css and change the images urls, so they get processed thru the pipeline. – rafamvc Sep 08 '11 at 17:56
  • Just a note: you don't need the symlink if using the config.assets.debug option, as the urls in the jquery ui stylesheet will resolve OK – asgeo1 Sep 13 '11 at 09:24
  • On Windows since a symlink is not possible, what is the recommended approach? – Philippe Monnet Sep 24 '11 at 19:48
  • Philippe Monnet: The NTFS filesystem does support symlinks http://en.wikipedia.org/wiki/NTFS_symbolic_link Alternatively on windows you can just copy instead of linking. – denysonique Sep 26 '11 at 05:20
  • @Ram it wasn't for me. I'm getting `require_tree argument must be a directory` – Archonic Nov 20 '13 at 21:46
11

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

eduludi
  • 1,618
  • 21
  • 23
8

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.

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

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.

dmonopoly
  • 3,251
  • 5
  • 34
  • 49
  • This was the part that was broken for me. And, couldn't follow the " vendor/assets/images $ ln -s jquery_ui/ images" instruction on Windows. THank you! – aaandre Jun 21 '12 at 21:33
5

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

application.css

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

application.js

//= require jquery.ui.all
mkirk
  • 3,965
  • 1
  • 26
  • 37
5

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
...
Doc Walker
  • 161
  • 1
  • 6
2

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' %>
KenB
  • 6,587
  • 2
  • 35
  • 31
  • I really like this approach with the exception of #2 not scaling well. I'd love to keep all my vendors in their own structure so upgrade is easy and I don't have to parse out CSS/JS into separate directories. I guess the overarching trend here is someone makes a gem (bootstrap, jquery UI) – Chris Bosco Apr 22 '13 at 22:34
0

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

fringd
  • 2,380
  • 1
  • 18
  • 13