In my new rails project, I add bootstrap css and javascript; but it doesn't work and class aren't add to pages.
I copy files in app/assets/javascripts and app/assets/stylesheets.
I add this file in application.html.erb like below:
<head>
<title>JiraAjax</title>
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'bootstrap.min' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'bootstrap.min' %>
<%= csrf_meta_tags %>
</head>
when I run project, I see both of file in html code in browser, but class aren't preview and doesn't work.
Other css is working, but bootstrap doesn't work.
I added pre-compile line for each file in application.rb, but the problem isn't solve.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
app/assets/stylesheets/application.css:
*= require_self
*= require bootstrap-rtl.min
It's very strange for me, any one can help me?
You have to watch out for the load order of the assets that you're using. Depending on the specific situation, bootstrap should be loaded either before or after other assets.
Another issue I ran into was having either asset twice, which threw me off.
I'd suggest playing around with the order and making sure you don't have duplicate imports :) What I ended up doing was just hardcoding imports into my html.erb files instead of dealing with the asset-pipeline as a temporary workaround.
Related
In my Rails application i've got several layouts and for each I want to load special CSS how can I do this?
at the moment application.css looks like this:
//= require bootstrap.min
//= require filechooser
//= require bootstrap-switch.min
//= require jquery.datetimepicker
//= require fancybox2_1_5/jquery.fancybox
//= require style
*= require_self
*/
If you are using different layouts for different controllers, then you can use your special css or js files directly in your layouts by adding a method to your ApplicationHelper as follow:
def controller_stylesheet_link_tag
if params[:controller] == "foo"
stylesheet_link_tag 'foo'
else
stylesheet_link_tag 'bar'
end
end
Then, add this helper method to your layouts like application.html.erb -
<%= controller_stylesheet_link_tag %>
I like to use a specific JS/CSS for file for each layout (when applicable).
For example, app/layouts/application.html.erb would have your application.css, like this:
<%= stylesheet_link_tag 'application' %>
Whereas app/layouts/admin.html.erb will have admin.css:
<%= stylesheet_link_tag 'admin' %>
Using Sprockets 3 or later, you can even use index files in the directories to keep things organized.
app/assets/stylesheets/admin/index.css will be available as admin.css. See Index Files are proxies for folders for more info.
I import my own javascript in my application.js like this:
//= require 'overlay'
then I include application in my application.html.erb like this:
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
then I find that in my page I got
<script src="/assets/overlay-4f9aec59c40642be0f9be34f4dac3fdf.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-7eb3406005b56099419de90c3e6ea11b.js?body=1" data-turbolinks-track="true"></script>
in /assets/application-7eb3406005b56099419de90c3e6ea11b.js?body=1 also iclude the overlay.js which means overlay.js is included in my page for twice.
such as I write this in overlay.js:
$('#ele').click(function() {console.log 'overlay.js';})
when I click the button, I will get two line overlay.js, how can I solve this?
Put your js file under the folder assets/javascripts
Doing this you don't need to write this
//= require 'overlay' Instead of this write
//= require_tree . in your application.js file. Hope it will work.
Im trying to make basic structure of my project to work out. In my "Master" file i have a line which call main.js.coffee script file:
<%= javascript_include_tag "application", 'main' %>
in my main i have call to the next js files :
#= require_self
#= require_tree ./controllers/main/
./controllers/main/ contains just 1 single file mainIndexCtrl.js.coffee
so here is the structure:
So on call of url:port/main/index application.html.erb is called which call to main.js.coffee which than call to mainIndexCtrl.js.coffee, or more like that what i think it does, because doesnt matter what i do i cant get rid of folowing error:
I am VERY new to Rails, so basicly i really dont know what to do because this error doesnt exactly saying anything to me.
Main.js.coffee :
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
#= require_self
#= require_tree ./controllers/main/
application.js
//= require jquery
//= require jquery_ujs
//= require angular
There is an error in your main.js.coffe file. Either correct the syntax/code error in the file or remove it from your javascript_include_tag (like: <%= javascript_include_tag "application" %>) Also, it would make sense to include this file in your application.js, if it is to be used, to take full advantage of the asset pipeline....
Newish to rails and I've read that I should put all my JS/CSS into applications.js/applications.css and have it handled by the asset pipeline. However, I have a decent amount of js/css that is only used when an admin is logged in and adding/editing pages.
It seems to me that it's a lot of overhead to load those scripts and styles on every page. What's the best way to go about optimizing this? I can create a separate asset pipeline that only gets included when admins are logged in, or only on pages where it's necessary?
-EDIT 3-
The below will work in production, however you need to add: config.assets.precompile += ['editing.js', 'editing.css.scss'] to production.rb
-EDIT 2-
The below doesn't actually work on production. Looking for a better solution when I get a minute.
-EDIT-
This is the setup that I've come up with. It works properly, so I guess I'm asking if there is any reason that I shouldn't do it this way?
application.html
!!!
%html
%head
%meta{:charset => "UTF-8"}
%meta{name: "Description", content: "base10 CMS"}
%title= "base10 CMS"
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application"
= csrf_meta_tags
- if admin_signed_in?
= stylesheet_link_tag "editing", media: "all"
= javascript_include_tag "editing"
= cloudinary_js_config
%body
#container
#messages
- flash.each do |name, msg|
= content_tag :div, msg, :id => "flash_#{name}"
#content
= yield
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
editing.js
//= require ckeditor/init
//= require cloudinary
//= require_tree ../../../vendor/assets/javascripts/.
application.css.scss
/*
*= require baseline
*= require bootstrap
*= require font-awesome
*= require_self
*/
#import 'mixins.css.scss';
#import 'layout.css.scss';
#import 'pages.css.scss';
editing.css.scss
/*
*= require_self
*/
#import 'mixins.css.scss';
#import 'admin.css.scss';
#import 'forms.css.scss';
Your approach is fine. One thing to keep in mind is that in production, all the directives within the application.js and application.css.scss manifests will get compiled and minified into a single file (application.js and application.css respectively) so in most cases there won't be much overhead. If there is tons of extra stuff that you're including to support logged-in admins, then yes, your approach is fine, otherwise, I wouldn't worry about it and just leave everything in the application.* manifests.
Im very new to ruby, learning from some tutorials in a book i bought. I'm aware the books going to date quick and i think possibly already has.
I'm trying to get the follow code to load my stylesheets and my js to the page.
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
However this is not working, when i load my rails server and locally view my app from the tut, the css and js are both not loading. There is no reference to them in the head. Is this a date way to do it or perhaps something else is wrong? Any help would be appreciated, like i said im totally new and not a dev by trade so go easy on me.
Regards
V
Using rails 1.9.3-p0
First of all I advise you to look for information on asset pipeline for rails 3 ( you can start with Railscast)
To load your js files change
<%= javascript_include_tag :defaults %>
to
<%= javascript_include_tag "application" %>
and your application.js should be sth like
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
the last line loads your js files from assets folder