CODEWITHSUNDEEP
jquery-uiruby-on-rails-3.1asset-pipelineassets
Roman Gaufman
Roman Gaufman

Reputation: 1124

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?

Upvotes: 52

Views: 42374

Answers (8)

mkirk
mkirk

Reputation: 4040

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

application.css

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

application.js

//= require jquery.ui.all

Upvotes: 5

KenB
KenB

Reputation: 6747

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' %>

Upvotes: 2

fringd
fringd

Reputation: 2528

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

Upvotes: 0

Jo Liss
Jo Liss

Reputation: 32945

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.

Upvotes: 8

Doc Walker
Doc Walker

Reputation: 161

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

Upvotes: 5

eduludi
eduludi

Reputation: 1693

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

Upvotes: 11

dmonopoly
dmonopoly

Reputation: 3331

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.

Upvotes: 6

denysonique
denysonique

Reputation: 16584

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

Upvotes: 63

Related Questions