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 :-).
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 .
*/
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
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.)
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:
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/')
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.
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:
#279 Understanding the Asset Pipeline
#268 Sass Basics
Edit: I forgot to mention that this works both locally and on Heroku on the Cedar stack.
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. :-)
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/
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.
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.
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.)
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.
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)
}
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.
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
...
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.
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'
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.
Related
I am trying to install a plugin called Chaffel.js, I have added it to my javascript file
+app
|+assets
||+javacripts
|||chaffle.min.js
|||
I have required it in application.js
//= require chaffle.min.js
//= require rails-ujs
//= require turbolinks
//= require_tree .
And I have also added this to config/initializers/assets.rb
Rails.application.config.assets.precompile += %w(chaffle.min.js)
And I have included it in my view
<%= javascript_include_tag 'chaffel.min' %>
And have added all the html / javascript it showed for the example but when I load up the view it gives me this error
Sprockets::Rails::Helper::AssetNotFound in Home#index
The asset "chaffel.min.js" is not present in the asset pipeline.
I don't know if it is a problem with my asset pipeline or if the plugin just doesn't work anymore (As the cdn src on its page doesn't seem to work either) Would love some help with this or recommendations for a different plugin/way to achieve the same effect (a text shuffle animation).
I was able to get it working in a normal html file by just directly including the file via
<script src="chaffle.min.js" charset="utf-8"></script>
So it is definitely a problem with my code / the asset pipeline and not the plugin.
First of all, if you have //= require_tree . in your application.js you don't need to change any other files. //= require_tree . will include all files in the javascript directory for you:
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
But the problem you have faced, I guess is a just a typo: chaffle / chaffel. But again, just clear all mentions of it and leave only require_tree – that should be enough.
There are already similar questions on SO, but not enough clear responses to understand the following issue.
My goal is to setup Rails 5 with Bootstrap using Bower.
Using Bower I installed Bootstrap in the the folder:
vendor/assets/bower_components/bootstrap-sass
Then, I updated initializers/assets:
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Then I added the gem 'sass-rails' to Gemfile and updated application.js:
//= require jquery
//= require bootstrap-sass/assets/javascripts/bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
The assets for JS seem to be working well: if I load http://localhost:3000/assets/application.js
I can see that the Bootstrap JS part has been added there.
The problem is about Sass (SCSS):
I added bootstrap-sass/assets/stylesheets/bootstrap into application.css.scss but with no success:
/*
*= require_tree .
*= require_self
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
in fact if I load http://localhost:3000/assets/application.css I see:
/*
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
(the folder specified on the #import is containing many _*.scss files and a mixins folder)
The questions are:
Do you have any ideas why this is not working?
should not I see on assets/application.css all the CSS precompiled?
PS:
Any resource to understand the issue would be much appreciated.
Move the import, so it's outside the /* .. */
/*
*= require_tree .
*= require_self
*/
#import "bootstrap-sass/assets/stylesheets/bootstrap";
[Removed misleading instructions to use require instead of import, as I was wrong.]
In addition to the accepted answer, if you look into the bootstrap-sass/assets/stylesheets directory, you'll notice that there is no file bootstrap.scss but rather one prefixed with an underscore.
Also, usually it's better to import only modules you actually need from the bootstrap-sass/assets/stylesheets/bootstrap/ directory instead of the main _bootstrap.scss file.
I'm trying to use Bootstrap Combobox for rails.
The instructions say that:
*"You will need two files included in your HTML in order for this to
work:
js/bootstrap-combobox.js
css/bootstrap-combobox.css*
I realise that they need to go in the application js and application css respectively, but I think that I'm getting the syntax wrong because I'm getting an error.
This is how I'm adding to application.css.scss:
* require css/bootstrap-combobox.css
This is how I'm adding to application.js:
//= require bootstrap-combobox
What error are you getting?
Without knowing the exact error, here's what I suggest:
After you make sure you have a file in your assets/stylesheets named bootstrap-combobox.css, you want your require statement to look like this:
*= require bootstrap-combobox
Your require statement looks fine for the JS assuming you have the file in the assets/javascripts folder.
You can also use //= require_tree . and *= require_tree . to require all files in your javascripts and/or stylesheets folders respectively instead as well.
Check out this section of the Rails asset pipeline for more info.
I have a Rails application, and I'm using Ember on the front-end. I'd like to move the ember-related files down one level in the directory structure, but when I do, the templates no longer render.
In the plain, vanilla, working version of the application, my directory structure is:
./app/
assets/
javascripts
application.js
ember-app.js
routes.js
store.js
models/
controllers/
routes/
templates/
views/
with: application.js
//= require jquery
//= require jquery_ujs
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require ember-app
App = Ember.Application.create();
and: ember-app.js
//= require ./store
//= require_tree ./models
//= require_tree ./controllers
//= require_tree ./views
//= require_tree ./helpers
//= require_tree ./templates
//= require ./router
//= require_tree ./routes
Everything works fine. However, I would like to move the ember-app file and all ember javascript code down one level, and when I do so, the templates do not render. (Part of the application uses Ember, but not the entire application, and I'm trying to set up two separate paths through the asset pipeline.)
The desired structure is:
./app/
assets/
javascripts
application.js
embro/
ember-app.js
routes.js
store.js
models/
controllers/
routes/
templates/
views/
with: application.js (revised: 'require ember-app' becomes 'require embro/ember-app')
//= require jquery
//= require jquery_ujs
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require embro/ember-app
App = Ember.Application.create();
(ember-app.js is unrevised.)
As I said, after the move, none of the template content appears onscreen. No errors onscreen or in the console, just an empty ember-application.
When I examine Ember.TEMPLATES in the console, all the expected templates are listed. Furthermore, if I put the desired content in x-handlebars templates in the appropriate rails view, the content successfully renders, just as it did with the original directory structure.
For example, in apps/views/welcome/index.html....
<script type="text/x-handlebars" data-template-name="application">
<h1>hello</h1>
{{ outlet }}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h1>this is the index</h1>
</script>
... and we're good to go again.
but if I leave the rails view empty, as I did with the original structure, it's a no go.
Wondering if perhaps the ember-rails gem requires the handlebars templates to be present in app/assets/javascripts/templates, and if there's a way to override this. The documentation mentions adding a templates_root option to the application configuration block, and I'm wondering if this is the key. I've played around a bit, no luck yet.
Any ideas?
UPDATE:
Afraid I'm not having any luck with the templates_root option. As an experiment, I tried building a new, simple rails app, and using the ember-rails bootstrap generator to get it up and running. All's well, but if I then attempt to simply change the name of the templates folder (i.e. app/assets/javascripts/templates -> app/assets/javascripts/temple), with appropriate changes to the sprockets includes and config files, I'm getting the same results.
Any chance the templates_root option is somehow broken?
I'm using Ruby 1.9.3, Rails 3.2.11, ember-rails 0.10.0
Any pointers to where I should look in the ember / ember-rails / handlebars source code? Have started poking around.
thanks!
You're right that you need to set templates_root. Try adding
config.handlebars.templates_root = 'embro/templates'
to the configuration block in application.rb, or
RailsApp::Application.config.handlebars.templates_root = 'embro/templates/'
to a new initializer, where RailsApp is whatever your application is named.
Edit:
I was able to reproduce the behaviour that you described with templates_root. The fix for me was to delete the /tmp folder of my application and restart rails. After that, the templates were named correctly.
Edit:
More precisely, you need to clear the sprockets cache at /tmp/cache/assets after changing templates_root.
Edit:
As mentioned in the comments below, a simple rake tmp:cache:clear should take care of the problem.
For site wide specific JS code (i.e. for the header, which appears on all pages). Where should this be placed? In:
app/assets/javascripts/application.js
Is that right?
For pages#home. Which root_url also points to (root :to => 'pages#home'). Where should my JS file be placed in the pipeline?
app/assets/javascripts/pages/home.js
And regards to my application.js. Is this right? It currently looks like:
//= require jquery
//= require jquery_ujs
//= require_directory .
Or should I just embed page specific JS in the view?
It's not a good idea to put js code in application.js. You can put that code in any other file on the assets/javascripts folder and it will be included automatically by the require_directory or require_tree command. Your application.js file is perfectly fine as it is right now, but you might want to use require_tree instead of require_directory for recursive inclusion.
For example, the javascripts files in app/assets/javascripts/pages will be included by require_tree but not by require_directory.
Recommended reading: Asset pipeline guide