I would like to include PIE.htc in my Rails application to make CSS3 easier for IE. I can't seem to figure out how to include the PIE.htc file.
I tried to include PIE.htc in my assets folder as well as assets/stylesheets folder, but I no routes matching error.
How do I include PIE.htc with rails asset pipeline?
Try the solution in this post: Using PIE.htc in rails
Basically, it should be:
behavior: url(/assets/PIE.htc);
Also, if you want to be completely sure that the PIE.htc file is being loaded, open it and add an alert as so:
<script type="text/javascript">
alert("PIE works);
If the file if being loaded, a popup should appear showing the message.
Related
Many jQuery plugins have the following directory structures:
/<plugin name>
../css
../images
../js
The CSS files usually have relative links to the images in them. What I want to do is include these plugins in the Rails Way under the Asset Pipeline, and hopefully that doesn't involve having to renamed the file references to remove the relative links. Is there such a Rails Way?
Could it also be that it's overkill to include an already-minified jQuery plugin in the Asset Pipeline?
You should try to add your assets to the load path which is the recommended way, as far as I know. If the application you're running has the assets-pipeline activated, it should find your assets after expanding the path in your application.rb
config.assets.paths << Rails.root.join("plugins/plugin_name/assets/")
Not shure, if this is what you asked for but if not, you should check: http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
Remeber to restart your server
I had the same issue and also tried to find "the Rails way" to do this. And this is what I ended up with at the end of the day:
As Rob already mentioned:
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Source: 2.1 Asset Organization
Lets take a practical example: using the jquery_datepicker gem (Note: we had to use a workaround because of this issue: bundle pack does not work with git sources).
1) Installing the gem (pretty straighforward):
cd vendor/gems
git clone https://github.com/albertopq/jquery_datepicker.git
2) Add this to your Gemfile
gem 'jquery_datepicker', :path => 'vendor/gems/jquery_datepicker'
3) Install a jquery-ui theme
From ThemeRoller select a theme, check Datepicker and Slider
and the jQUery version
Download and extract the content of the package
CSS/images from the css/theme-name folder move them:
jquery-ui-1.8.xx.custom.css to app/vendor/stylesheets/
the images folder to app/vendor/images/ (yes, move the entire folder images so you end up with something like this app/vendor/images/images/ui-icons_256x240.png
i18n from the development-bundle/ui/i18n folder (optional) move them to:
Create a folder i18n under app/vendor/javascripts/
move jquery.ui.datepicker-xx.js to this folder app/vendor/javascripts/i18n/
make sure the i18n folder is loaded so include in application.js
//= require_directory ./i18n
vendor/assets is loaded automatically AFAIK so you don't have to include the path in the asset pipeline.
I'd like to see how others are approaching this, it's a very good question.
I think the reason you haven't received an answer is because it's kind of unclear what you're asking. Are you asking if it's overkill to put your plugins in the asset pipeline? Are you asking if you have to rename file references?
I always put all my jquery plugins in my asset pipeline. Overkill or not, there all in one place and they only get compiled once so even if compiling them takes longer, it doesn't affect my app.
What would be the best way to have a html5 cache manifest with the rails asset pipeline? I'm thinking of adding an erb file to app/assets that has the paths of all the assets contained in it. This would work but has a couple problems right off the bat:
How could I increment the version number?
How can I make sure the http content type is set correctly?
Here's how we're doing it on an app right now:
To handle the generation of the cache manifest file, we are using Rack::Offline
We then configure this to point to, for instance, "/assets/application.css"
In the layouts/views, we are NOT using the stylesheet_link_tag, javascript_include_tag or image_tag helpers for cache-able assets so that we don't get a link to the assets with the hash in it, eg "/assets/application-2345234...2344.css"
This works because when the assets are precompiled, rake assets:precompile:nondigest creates versions of the files without the hash in the name, and then Rack::Offline checks these to generate a new manifest (or not).
Sprockets provides you with one by default.
in one of your environment configs (/config/environments/development.rb)
config.assets.compress = false
config.assets.debug = false
and in your html file:
<html manifest="manifest.yml">
running
rake:precompile
will give you a manifest file to public/assets/manifest.yml
I am trying to put some external images (used by a jQuery plugin) to vendor/assets/images in my Rails 3.1 app. Problem is that when I try something like:
<%= image_tag "ui-bg_flat_75_ffffff_40x100.png" %>
I get an error:
No route matches [GET] "/assets/ui-bg_flat_75_ffffff_40x100.png"
I checked my Rails.application.config.assets.paths and it list these dirs:
..../app/assets/images
..../app/assets/javascripts
..../app/assets/stylesheets
..../vendor/assets/images
..../vendor/assets/stylesheets
..../.rvm/gems/ruby-1.9.2-p180#mygems/gems/jquery-rails-1.0.9/vendor/assets/javascripts
As you can see /vendor/assets/images is listed there. If I put my image to app/assets/images everything works.
I thought that new asset pipeline was supposed to go through all assets dirs and serve requested file wherever it finds it.
Does anyone knows what's the problem here?
I had to restart my rails server after creating the vendor/assets/images directory. Before this, I was seeing the same error as you ("No route matches [GET]").
My guess is that the rails server does not check these directories if they did not exist when it was first started. When you open a rails console to diagnose the issue, you get a new instance of rails which knows about the directory, which only adds to the confusion.
If you are using a jQuery UI Theme Roller theme then the problem might be that in the jquery-ui css file the images are referenced within a sub folder 'images'.
I.e. you either have to put your images in a folder './app/assets/images/images' or you have to edit the jquery-ui css file and remove the 'images/' folder prefix.
The asset pipeline is described in this rails guide by Ryan Bigg (draft status at the moment).
http://ryanbigg.com/guides/asset_pipeline.html and http://ryanbigg.com/2011/06/sprocket-asset-tags-internals/ for the references.
According to this, your example should work.
Extract:
Assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.
app/assets is for assets that are owned by the application, such as custom images, javascript files or stylesheets.
lib/assets is for your own libraries’ code that doesn’t really fit into the scope of the application or those libraries which are shared across applications.
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins.
Any subdirectory that exists within these three locations will be added to the search path for Sprockets (visible by calling Rails.application.config.assets.paths in a console). When an asset is requested, these paths will be looked through to see if they contain an asset matching the name specified. Once an asset has been found, it’s processed by Sprockets and then served up.
I have tested with an example in my app and the same syntax as yours works. Maybe you have a typo in the name of your asset.
For Martin: search path for Sprockets is visible by calling Rails.application.config.assets.paths in a console.
Maybe you should create another folder in /assets/images. You make a name 'images' and then you just copy all jquery-ui image and paste on folder 'images' that you create before. Hopefully this will help you.
Hello I have one question I have my file main.scss which is in public/stylesheets/scss. In documentation is written:
By default, .sass and .scss files are
placed in public/stylesheets/sass
(this can be customized with the
:template_location option). Then,
whenever necessary, they’re compiled
into corresponding CSS files in
public/stylesheets. For instance,
public/stylesheets/sass/main.scss
would be compiled to
public/stylesheets/main.css.
I have in my gemfile gem 'haml'
And from my view I do sth like this
= stylesheet_link_tag 'main'
And the file is not found when I check the source(there is a file with with information about routing error). I guess that compiling it by hand it is not way to go so how I can make compile scss file to public/stylesheets automatic? What mean in documentation that they are compiled when necessary?
Thanks in advance
Put your .sass or .scss files in public/stylesheets/sass, not public/stylesheets/scss. Then the stylesheets should automatically generate whenever you change the corresponding sass/scss file. The generated stylesheets end up in public/stylesheets/.
Renaming the folder should make it all work.
EDIT: it looks like Rails 3.1 is going to be not only including SASS by default, but it will also be moving most of the stuff found in the public folder to the app folder... so this answer will only apply to versions of rails before 3.1.
Rails 3.1 edge use sprockets to handle .js and .scss files.
Sprockets use comments to deal with dependencies.
I put the three folders (dojo dijit dojox) in vendor/assets/javascripts.
Then add a line in app/assets/javascripts/application.js
//= require dojo/dojo
console.log(dojo);
Now dojo has been merged into application.js.
But dojo has dependency system itself. When I require more dojo modules. It cannot find the right path.
dojo.require("dojox.grid.DataGrid");
// Error in webkit console: Error: Could not load 'dojox.grid.DataGrid'; last tried '../dojox/grid/DataGrid.js'
// Error in rails server log: Started GET "/undefined../dojox/grid/DataGrid.js" for 127.0.0.1 at Sat Apr 16 01:26:05 +0800 2011
These are two different dependency systems. How can I put them together?
dojo.js doesn't take too naturally to being renamed. This is because part of Dojo's initialization process involves searching through the DOM for the script tag responsible for loading itself. It does this for two reasons:
Determine its baseUrl if not already specified
Pick up any djConfig (or data-dojo-config in 1.6+) properties specified in the script tag itself
When it searches for this script tag, it looks for one with src set to dojo.js or dojo.xd.js; it's not finding it in your case, thus the failures.
It should be possible to work around both of these issues, by specifying djConfig (or dojoConfig in 1.6+) fully programmatically in another script tag before the one that loads Dojo, and by specifying baseUrl manually in these config properties.
For example, if your application.js were in vendor/assets/javascripts as referred to in your original post, you could try doing this:
<script type="text/javascript">
//if you're using 1.5 or earlier, use djConfig instead of dojoConfig
var dojoConfig = {
//note that baseUrl points to the folder containing dojo.js, therefore the dojo folder
baseUrl: 'vendor/assets/javascripts/dojo/'
};
</script>
<script type="text/javascript" src="vendor/assets/javascripts/application.js"></script>
For more information on dojo config settings: http://dojotoolkit.org/reference-guide/djConfig.html (in fact, that page actually has a note under baseUrl specifically about renamed dojo.js.)
Try adding the dojo files into a dojo/scripts directory under /vendor/assets/javascripts. In the dojo directory, create a dojo.js file in the dojo directory and put //= provide "scripts" in that file.
Then in your application.js file put //= require <dojo>. Check out the Sprockets site http://getsprockets.org/ for info but that should work.
The docs aren't out for Rails 3.1 and the asset pipeline yet so a lot of this stuff is kind of trying to figure out on your own.
Umm... why are you placing your javascripts in vendor and app rather than public/javascripts? you have include anything in public/javascripts with =javascript_include_tag('path_to_javascript') where path_to_javascript would be "dojo/DataGrid" for public/javascripts/dojo/DataGrid.js
http://guides.rubyonrails.org/getting_started.html
I know it's maybe a bit late but I could help someone else.
I finally made it work and posted the explanations here.