I have an application thdirat uses Twitter Bootstrap for styling. It has worked fantastically for a year. Suddenly I get this error in development:
ActionView::Template::Error ('fontawesome.less' wasn't found
(in /Users/me/myapp/code/myapp/app/assets/stylesheets/bootstrap_and_overrides.css.less)):
What could be causing this? I haven't changed the Gemfile or anything.
The line causing the error is the stylesheet inclusion tag in my template:
<%= stylesheet_link_tag "application", :media => "all" %>
In app/assets/stylesheets/bootstrap_and_overrides.css.less I changed:
// Font Awesome
#import "fontawesome;
to:
// Font Awesome
#import "fontawesome/font-awesome";
and it worked.
when I run rails-select2-example, I met the same error. According to the font-awesome.less' wasn't found. #593, I changed:
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot?v=3.0.2");
#fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot?#iefix&v=3.0.2");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff?v=3.0.2");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf?v=3.0.2");
// Font Awesome
#import "fontawesome";
into:
#fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot#iefix");
#fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
#import "fontawesome/font-awesome";
It worked fine!
In application.css
*= require font-awesome
Related
I have a rails app where I want to choose a date of birth. I'd like to use the jquery-ui datepicker for this but am not sure how to implement it into my rails app.
This is a screenshot of the options I want with the month and years menus to make selecting birthdates easier.
http://cl.ly/image/46152b372N1b
I'm really not sure where to start as far as setting this up in my application.js file as well as in my view.
Right now my view/form looks like this
<%= f.text_field :patient_dob, :id => 'datepicker' %>
Here's my application.js
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
Again, I'd like that to be a a jquery-ui datepicker with the month and years option to make selecting the birthdate easier.
If anyone can throw me some code to get started, I'd appreciate it. Right now when I click the text field, nothing happens.
Make sure you include jquery.js, jquery-ui.js, jquery-ui.css in your head html tag.
jQuery and jQuery-ui javascript files should be declared only once. You can check this by right-clicking your webpage (eg. in chrome) and select View Source Code. Also, on Source Code click the jquery.js, jquery-ui.js, jquery-ui.css and application.js links and make sure that your code is in there (if you don't find the code expected, check your paths).
application.js file should be declared after jquery and jquery-ui.
So your < head > should look like this:
<head>
<meta [your code]>
<title>[your code]</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<%= javascript_include_tag "application.js" %>
</head>
After some searching and experimenting this code worked out for me. It seems what I was using before either wasn't the object or I had it closed wrong.
$(function(){
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:2013'
});
$('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
I have an #import statement in one of my css files... all my css files are bundled/minified, and apparently that is not kosher as I get an error:
run-time error CSS1019: Unexpected token, found '#import'
The import is a font from Google.
What is the proper way to handle CDN in MVC4?
thanks
This was embarrassingly simple...
In BundleConfig.cs :
bundles.UseCdn = true;
// bundles code
var cdnPath = "path to your resource (font in my case)";
bundles.Add(new StyleBundle("~/fonts", cdnPath));
Then in layout
#Styles.Render("~/fonts")
In my Rails project, in which I am using Coffeescript, I want to be able to do something like this in a view:
f.text_area :content, :size => "77x4", :oninput => 'Helpers.expandTextarea(300)'
This would call a coffeescript function that would expand the textarea when required. My problem is that I can't seem to properly namespace the coffeescript to get this to work. I tried to do it like this
# site.js.coffee
Helpers =
expandTextarea: ->
alert "function found!"
This doesn't work. Trying to call Helpers in the browser console will throw an undefined error. My question is this:
What code would I use in site.js.coffee to achieve the namespacing I want?
You could manually put Helpers into the global namespace:
window.Helpers =
expandTextarea: ->
alert "function found!"
Then you should be able to say Helpers.expandTextarea(300) anywhere you want. Assuming, of course, that site.js.coffee is included on every page.
CoffeeScript files are wrapped in functions by default:
(function() { /* compiled CoffeeScript goes here */ })();
to avoid polluting the global namespace. You can supply options to the CoffeeScript compiler to not wrap like this but you're better off explicitly putting global things into window.
What sort of things OUTSIDE of the Rails codebase can affect asset precompilation?
My colleague is experiencing asset precompilation issues, while it works fine for me. We're running the same code. We have Gemfile and Gemfile.lock in version control, so those are identical, and application.rb is the same for both of us (so, for example, config.assets.enabled = true is set for both of us.)
Here are the two relevant files. The issue we're experiencing is below.
app/views/layouts/application.html.erb:
...
<%= stylesheet_link_tag "application", :media => "all" %>
...
app/assets/stylesheets/application.css:
/*
* 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
*= require booking_availability_table
*= require bootstrap_and_overrides
*= require browse_coaches
*= require landing_pages
*= require layout
*= require lightbox
*/
note: Some of these files are .css, some are .css.less, and some are .css.scss.
The issue:
When loading the homepage, he gets the error
TypeError in Static_pages#home
can't convert nil into String
(in /path/to/app/assets/stylesheets/layout.css.scss)
Extracted source (around line #20)
20: <%= stylesheet_link_tag "application", :media => "all" %>
From experimental deleting, we see that it's only the .css.scss files that are causing the problem. Deleting the lines in application.css corresponding to SASS files stops the error from occurring and lets the page load. However, if we do so:
The home page then has tons of links to /stylesheets/___.css, which result in 404's, instead of the correct /assets/____.css as it does for me.
What we tried:
I tried stepping through loading the homepage on both our machines with debugger. Our code execution diverged here:
.rvm/gems/ruby-1.9.2-p290/gems/actionpack-3.2.1/lib/sprockets/helpers/rails_helper.rb:
def stylesheet_link_tag(*sources)
...
sources.collect do |source|
if debug && asset = asset_paths.asset_for(source, 'css')
asset.to_a.map { |dep|
super(dep.pathname.to_s, { :href => path_to_asset(dep, :ext => 'css', :body => true, :protocol => :request, :digest => digest) }.merge!(options))
}
else
super(source.to_s, { :href => path_to_asset(source, :ext => 'css', :body => body, :protocol => :request, :digest => digest) }.merge!(options))
end
end.join("\n").html_safe
Specifically, the statement asset_paths.asset_for(source, 'css') raises an error for my colleague, but not for me.
We also tried uninstalling and reinstalling rails and rvm.
Oh, feels stupid... we fixed it. rm -rf'ing the entire directory and re-cloning it fixed it. I guess there was an extra file in there floating around or something.
I feel that I'm missing something very stupid but I was stucked all day with this and didn't found anything to sorted it out. I want to load a map with an user marked in it when a fancybox lightbox is called, the following code is the best and minimal approach that I have but I'm getting:
ReferenceError: Can't find variable: google
= link_to image_tag('map.png'), map_vendor_path(#coupon.vendor), class: 'js-show-map'
:javascript
$(document).ready(function(){
$('.js-show-map').fancybox({
onComplete: function(){
Gmaps.loadMaps();
Gmaps.map.addMarkers([{"lng": "7.859409", "lat": "48.023551"}]);
}
});
});
the following view is called when click in link
map.html.haml
//
it's here just for test
= stylesheet_link_tag 'gmaps4rails.css'
= javascript_include_tag "gmaps4rails/gmaps4rails.base"
= javascript_include_tag "gmaps4rails/gmaps4rails.googlemaps"
= gmaps4rails(#vendor.to_gmaps4rails)
= yield :scripts
application.js
...
//= require_tree ./templates
//= require_tree ./gmaps4rails
application.css
//= require gmaps4rails
I checked head source code and I see
<script src="/assets/gmaps4rails/gmaps4rails.base.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.googlemaps.js?body=1" type="text/javascript"></script>
Map loads fine when not in the lightbox. Any help will be appreciated, thanks.
I guess the problem is the following:
you click the fancybox
it retrieves gmaps4rails html and scripts
external scripts aren't loaded on the fly
So you should:
include manually the js dependencies in your root view
disable the external js dependencies inclusion (not mandatory though)