Best IT Recipes

Ruby on Rails 3.1 and jQuery UI Images

I use Ruby on Rails (Edge, development version) and Ruby rvm 1.9.2.

application.js as follows.

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

Where is the appropriate place in Ruby on Rails 3.1 to host the jQuery UI theme?

According to the Autocomplete Fields in Ruby on Rails 3.1 with the jQuery UI, I have to put the jQuery UI theme in the vendor / assets / stylesheets folder. It sounds like a smart place to have it, but I can't get it to work: - (.

I managed to load the CSS by putting it in the assets / stylesheets folder, but the images that I could not load.

I could, of course, use the old way by simply placing 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 person, I would rather use a new way to do tings :-).

+55
jquery-ui
May 18 '11 at 17:16
source share
18 answers

I fell to do it the old way:

I put the jQuery folder containing the theme (unchanged with both the CSS and images folder) in the assets / stylesheets folder, and pasting: <%= stylesheet_link_tag "jquery/ui-lightness/jquery-ui-1.8.13.custom" %> in app/views/layouts/application.html.erb file. This solution is for those with less hazel when I update jQuery later.

(Thanks for all the suggestions for the solution. It's time to conclude.)

+7
Jun 07 2018-11-11T00:
source share

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 user interface provided by the jquery-rails stone. But stone does not provide theme files. To do this, I added a theme directory to vendor/assets/stylesheets containing:

  • jquery.ui.theme.css file,
  • jQuery UI directory images .

Be sure to save the images directory with the CSS file! Do not put image files under vendor/assets/images or they will not be found by jQuery (which look for them in /assets/images ).

Finally, changed the app/assets/stylesheets/application.css file to:

 /* *= require_tree ../../../vendor/assets/stylesheets *= require_tree . */
+26
Sep 13 2018-11-11T00:
source share

An example of a working setting:

  $ 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

+19
Jun 06 '11 at 23:25
source share

I like to selectively download jQuery UI JavaScript code so that I can easily upgrade to any future versions and have a lightweight jQuery user interface (including only the necessary files, here progressbar.js ).

I have the following setting for jQuery's "Dot Luv" theme.

Note:

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 minimize and compress them.

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

Directory structure:

Directory structure

application / 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

application / assets / style sheets /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

configurations /application.rb

 config.assets.paths << File.join(Rails.root,'vendor/assets/images/jquery-ui/v1.8.16/dot-luv/')
+6
Dec 25 2018-11-12T00:
source share

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 CSS files, I like @import instead to have more control over the loading order of CSS files. To do this, I need to add the .scss extension to the app/assets/stylesheets/application.css file, as well as to all the CSS files that I want to import, for example, 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 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 all the jQuery UIs in the provider / assets as follows:

JQuery UI stylesheet:

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

jQuery UI image folder:

 vendor/assets/images/images

Note that you can create an additional folder in the stylesheets path, as I am here, using the "jquery-ui / ui-lightness" path. This way you can save multiple jQuery themes perfectly separated in your folders.

** Reboot the server to load the newly created boot paths **

Ryan Bates has great screencasts about the asset pipeline and Sass in Ruby on Rails 3.1, where he shows how to use @ import in Sass. See here:

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

+5
Nov 20 '11 at 13:50
source share

I know that there are already many answers in this thread, but I'm going to use what worked best for me.

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

If you want to use your own theme (like me), there is a rake task that automatically converts the CSS file to SCSS and uses the image-path helper to find the right path.

+5
Jan 6 '12 at 18:59
source share

Now there is jquery-ui-rails gem (see announcement ). It packs images as assets (and correctly references them from CSS files), so things Just Work .:-)

+5
Feb 22 2018-12-12T00:
source share

So, here is one way to do this, in which there are no shortcomings of some of the others mentioned here - it does not require you to separate the topic and place its parts in different places, it does not require symbolic links, and it still allows you to compile a css theme into one main css as part of an asset pipeline. This does not require a monkey patch, as the Nash Bridges offer.

However, this requires an additional view of the hacker configuration string. (single line, though, mostly).

Ok, put your theme in vendor / assets / jquery / ui-lightness / as you like. (will also work in lib / assets or app / assets, in the same way).

and

 /* =require ui-lightness */

in your application.css application. So far, so good. Now, for the images to display correctly, 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 configurations that I could think of (for example, dev with debug = false, which launches some of the other solution attempts).

Additional information at http://bibwild.wordpress.com/2011/12/08/jquery-ui-css-and-images-and-rails-asset-pipeline/

+3
Dec 09 '11 at 4:52
source share

Based on a number of other suggestions here, I found a solution that works in my dev environment and in production on Heroku.

Application / Assets / JavaScripts / application.js

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

Application / assets / style sheets /application.css

 /* *= require_self *= require vendor *= require_tree . */

vendor / assets / style sheets /vendor.css

  /* *= require_self *= require_tree . */

I added jquery-ui-1.8.16.custom.css and the associated image folder to the vendor / assets / stylesheets directory (I found that if the image folder was not in the same folder as vendor.css, it did not work )

No other changes were needed to work in the Heroku production environment.

Thanks to @denysonique, @softRli and @Paul Cook for their previous answers that helped me.

+2
Oct 18 '11 at 12:07
source share

There is a proposed fix in Ruby on Rails, which makes pre-compilation of jQuery user interface images.

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

+1
Sep 09 '11 at 10:11
source share

The combination of suggestions here is what made me work:

Put jQuery custom CSS folder in vendor/assets/stylesheets folder.

Put vendor.css in vendor/assets/stylesheets :

 *= require_tree ./theme-css-name

In production.rb I added the following:

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

This is what you need for the images to be precompiled and resolved without editing the jQuery CSS CSS file or moving images from the theme CSS folder.

+1
Sep 14 '11 at 20:19
source share

To make this work both in my local development environment and on Heroku, I did almost the same thing as denysonique suggested, but with a few differences in the end:

At first, my directory structure looked like this:

 vendor/assets/images/ jquery_ui/ images/ ui-bg_flat_0_aaaaaa_40x100.png ...

And secondly, my symlink:

 vendor/assets/images $ ln -s jquery_ui/images images

Here is what finally worked for me.

+1
Nov 13 '11 at 10:20
source share

What I did to make everything right is as follows.

1.) Added CSS to assets / stylesheets folder

2.) Added images to assets / images folder

3.) Removed the paths to all images in CSS with find "url (images /" and replaced with "" leaving only 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.

0
May 19 '11 at 7:20 a.m.
source share

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 stick, something like this:

 .class{ background: url(/assets/jquery-ui/ui-icons_222222_256x240.png) }
0
May 20 '11 at 4:23 a.m.
source share

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

  • application / assets / style sheets / jQuery--1.8.16.custom.css
  • application / assets / images / -bg_highlight-soft_75_cccccc_1x100.png
  • ...
0
Oct 18 '11 at 20:10
source share

Which worked for me, instead of having a jQuery theme CSS file in app/assets/stylesheets/ and images in app/assets/images/ . I put them in app/assets/images/images/ and it worked. This is a kind of hack, but it seems to work from this point of view with minimal juggling and without modifying CSS files.

0
Nov 14 '11 at 9:12
source share

Get Google CDN Subject Subject:

  = stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css'
0
Jan 22 2018-12-01T00:
source share

At that moment I found not an ideal, but a working solution.

Suppose you have a jQuery UI theme in the /vendor/assets/stylesheets/ folder. Then you need to change application.css :

 /* =require ui-lightness */

and create plugin_assets_monkey_patch.rb in /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 each subfolder /vendor/assets/stylesheets/ ensures that style sheets such as jquery-ui-1.8.11.custom.css will be compiled (if you need this subfolder).

config.assets.paths ensures that folders such as /vendor/assets/stylesheets/ui-lightness/images are visible in the application area.

-one
Jun 15 '11 at 11:14
source share


More articles:


All Articles