I hope everyone is having a great day. In my pursuit of knowledge, I've ran into a huge stumbling block.
I'm following this tutorial. I'm using the most up to date everything, I think he is in rails 4 and I'm in rails 5.
https://youtu.be/GY7Ps8fqGdc?t=703
By no means is watching the tutorial necessary to understand my question. Right where I linked, the only thing he has done besides generate a simple rails app, is generate a controller like this:
rails generate controller welcome index
Then right where I linked into the video, he goes into the routes file and uncomments a line that isn't present in my rails app, so I just wrote it by hand
root 'welcome#index'
And it fails when I try to load localhost:3000, throwing a jsexception "TypeError: Object doesn't support this property or method"
Is there some functionality that has been deprecated or something? Why isn't this working? I've done the tutorial up to where I've linked at least 5 times. I have tried very hard to resolve this with no avail.
Oh, and before someone tells me you shouldn't route like that, I've read that before, but he's just trying to get the viewers to the point where they can execute ruby code on a web page, he covers routing in detail later, but I can't get there without beating this because the lesson relies on me getting this first.
Please, oh great forum, grace me with some answer and I will imbue you with an upvote and great thanks.
Also, on a side note, if anyone could recommend learning resources that have helped you get past beginner with this framework, I'd be happy to accept advice in addition to this question being answered.
EDIT: to include requested information
the routes.rb file
Rails.application.routes.draw do
get 'sausage/tuna'
root 'sausage#tuna'
end
One last piece of information, probably obvious, I call my things funny names so the generic "welcome" and "index" don't confuse me. I draw inspiration from the new boston and called mine 'sausage tuna' instead of 'welcome index'.
Thanks again for helping me out. I really want to learn this.
Ok the problem seems to come from ExecJS, which is basically the gem that deals with JS within Ruby.
The offending line is : <%= stylesheet_link_tag 'application', media: 'all' %>
(as you can see I am missing the turbolinks bit because I am not using turbolinks)
What this means? Basically this line is for a dedicated sheet of JS code attached to this page.
where is this code located ? In application.html.erb. application.html.erbis the default view layout. It means that every view triggered by your code inherits from this 'master' view.
So basicaly your routing is good if the error goes to this stage. Your Sausage#tuna action is triggered and then the `tuna.html.erb" view is rendered but with an error on this master view.
Basically because you have an error on application.html.erb, you will get the same error for every action of any controller and every view triggered.
Now what the problem ? Well I never encoutered this error but skipping coffee seems to solve your problem. Though in my case I have gem 'coffee-rails' and some of my JS files are actually "coffee.erb" files and I don't get the same error. So i guess it is kinda more complex than this..
But in order for you to understand Rails better , this line, as I said earlier, is compiling some JS and attaching it to the master view file (then to every view of your application)
Now if you want to know what JS will be compiled into this separate sheet, looks at the file app/assets/javascrips/application.js.
You should get something like :
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require jquery_ujs
//= require bootstrap
//= require cable
//= require rails.validations
//= require footer.js
//= require serviceworker-companion
Everything looks like it is commented out, but actually the last lines with //= require are actually gathering some JS from different gems. (Jquery, ...)
In my case : Jquery, Bootstrap, actioncable .. which is the Js I need on every page of my app...
Regarding your question about a good tutorial, the one I prefer is the getting started tutorial on Rails website : https://guides.rubyonrails.org/getting_started.html
EDIT
My mistake. It is the stylesheet that creates a problem. Which I am even less sure what could cause this because ExecJS is dealing the Js code in your app, not the CSS.
The stylesheet work exactly the same as said above for application.js. It links some CSS stylesheets to every of your application pages.
Here is mine app/assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require navbars.css.scss
*= require footer.css.scss
*= require cookiewarning.css.scss
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
As you can see, there is the navbar css and the footer css plus some other CSS that appends on everypage of my app.
(And thanks for accepting my answer as the answer but it is definitely not, just wanted to explain you what were things doing :) )
For anyone experiencing this issue, reinstalling node seemed to solve my problem.
Related
this post has half the process for using font awesome in a project. The steps are:
download font-awesome zip and extract into grails-app/assets/fonts dir.
modify build.gradle to add includes = ["fonts/*"] under assets
?
Use the font in your code, e.g.
< i class="fa fa-camera-retro fa-4x"> fa-4x
The question is, what is step 3? I assume there are two options:
put something like < link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> at the top of your gsp page, but what is the path? I tried guessing, e.g. href="/assets/fonts/css/font-awesome.min.css" but this does not work even after restart.
Put something in application.css. I have no idea what this could be, as it currently only refers to files in its own directory. I even read the manual, but could not figure it out. The manual mentions "*= require font-awesome" but presumably this requires more code somewhere as it doesn't work.
Any suggestions? Grails certainly makes some very hard things easy, but it also makes some easy things hard.
You may have to change the directory references inside the fontawesome.css file. Try for a replace of all the references to ../fonts/fontawesome for fontawesome and check if it works.
This assumes having the font-awesome.css file inside the assets/stylesheets directory and the fonts inside the fonts directory. Then, in build.gradle you should have something like:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
In your layout GSP file's (main.gsp) <head> you should have something like:
<asset:stylesheet src="application.css"/>
Finally, in your application.css you should have something like:
*= require font-awesome
The require should have the same name as the CSS file without the .css extension. So, if you have the minified version of font-awesome it should look like this instead:
*= require font-awesome.min
Note that by doing that you don't need to add the CSS include to GSP pages.
Alternatively you can just generate an embedding code on the website of fontawesome (http://fontawesome.io/get-started/) and add it to your main.gsp file
<script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>
I got the answer to step number 3 from here:
The answer is to add the following to application.css
"*= require css/font-awesome"
Surprisingly, this will pull on font-awesome.min.css from the fonts/css/ dir where the files are exploded from the zip distribution.
Jordi and klocker also supplied valid solutions, but the above one is what I was looking for.
How to reference the assets directly via a link is still a mystery.
I have required CSS stylesheets many times in many of my RubyOnRails applications, and actually i need a few things demystified.
What is the difference between:
//=require mystyles
and
*=require mystyles
Both seem to work, so what is the difference?
And is this a part of the asset pipeline or a part of SASS or just plain CSS?
The two examples you gave are exactly the same for stylesheets, however the //= syntax is the only one that works for Javascript. You also need a standard CSS comment at the start (/*) and a close comment (*/) at the end of the require block to make it ignored to anything but the asset pipeline:
/* ...
*= require mystyles
*= require_self
*/
These require directives are only part of the asset pipeline, not CSS or SASS. To include a stylesheet for CSS or SASS, you would use a #import rule as Blieque stated in his comment.
Check out the manifest files and directives section of the Asset Pipeline guide on the Ruby on Rails guide site for a more detailed explanation of the difference. There is also a warning given there that might be of interest:
If you want to use multiple Sass files, you should generally use the
Sass #import rule instead of these Sprockets directives. Using
Sprockets directives all Sass files exist within their own scope,
making variables or mixins only available within the document they
were defined in.
There is no difference, as long as it's a valid comment line, it'll work :)
I recently updated to the newest version of active admin and now my delete buttons don't work. I'm using the standard pages that are generated with out modifications. I'm getting this error on the browser debugging console:
Uncaught TypeError: Cannot read property 'mozilla' of undefined active_admin.js:9612
(anonymous function) active_admin.js:9612
(anonymous function) active_admin.js:10118
Here is my application.js file.
// 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 underscore
I use jquery through out my site so I am sure it is being included.
I have run rails generate active_admin:assets many times. I've been trying to fix this for about 10 hours now and I am stumped. Any help would be greatly appreciated.
Add the below to your HTML code after loading JQuery js library: (occurs when using JQuery version 1.9 and + )
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
Maybe a little late to the game here but this usually happens when you use JQuery around 1.9 and greater. JQuery 1.9 and greater (I think it's around that time) took out the browser sniffing so that's where that error comes from.
I have been looking around and cannot find a good example of implementing Chosen, http://harvesthq.github.com/chosen/, into a Rails app. I am trying to convert my existing multi-select into a chosen styled multi-select box.
I tried inserting the files manually, copying chosen.jquery.js into my assets/javascripts folder along with adding chosen.css. Also added //= require chosen-jquery to application.js along with the following code
jQuery(function($){
$('.chzn-select').chosen();
})
Also have *= require chosen in application.css.scss
I added :class => "chzn-select" in a collection_select in a form_tag.
Also tried using the 'chosen-rails' gem (here is an example http://choppingbloc.tumblr.com/post/24894460392/multiple-select-boxes-with-chosen-jquery) but had no luck.
Anything I might be overlooking? The collection_select is working, but it is not styled like Chosen. I am a beginner so if there is anything obvious I may have overlooked, please tell - everything above is what I have done.
Set it up like this
You have to include both the css file and the js file
in you application.css.scss, (because it is sass, do not use /* require)
#import "chosen";
in you application.js
//= require chosen.jquery
You should give your selects a different class or id than
$('.chzn-select').chosen();
because, it might make things messy when you debug the html. Chosen gives classes with this prefix like .chzn-done, .chzn-single, chzn-drop, chzn-search.
If you have a railscasts pro account.
look at this
token-fields-revised
You should really drop the chosen plugin and go for the select2 plugin. It is based on the chosen plugin, but is way better.
Using Rails 3.2.1
I created a simple controller called Home using the command:
rails g controller Home index
And it created a new controller and view for me:
Notice how there are two stylesheets, one "Application" and one "Home". I can't find any documentation to support this assumption but I'm guessing you put styles that will only be applied to the "Home" views, in the Home.css.scss file, correct?
So as a test, I added in some global styles to Application.css.scss.erb and ran the application.
The styles applied as expected.
Next, I added in some rules to the Home.css.scss file and I visited a "Home/index" view, yet the style in that file wasn't attached, neither as a seperate CSS reference link, or even appended to the single Application.css.scss file. This is highly confusing to me, since the comments say:
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
Why aren't the rules written in Home.css.scss applied to my website?
It can work this way and Marek is quite correct, the answer is in the guide.
In the introduction to section 2.1:
For example, if you generate a ProjectsController, Rails will also add a new file at app/assets/javascripts/projects.js.coffee and another at app/assets/stylesheets/projects.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.
So to set your application up to load controller specific stylesheets:
First, disable the default loading of all stylesheets by removing any extra requires in the application.css manifest.
Typically you'll see an entry like this:
*= require_tree .
If you still want to load some common css files, you can move them to a subdirectory and do something like this:
*= require_tree ./common
Second, In your application's layout add the suggested stylesheet_link_tag eg
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag params[:controller] %>
In this example we first load the application css file, we then load any css file that matches the current controller name.
I've solved this problem with a simple solution. I add to body the controller name as a class, editing views/layouts/application.html.slim:
body class=controller.controller_name
Or views/layouts/application.html.erb:
<body class="<%= controller.controller_name%>">
And then in my css I just use body.controller_name as a namespace:
/* example for /users/ */
body.users {
color: #000;
}
body.users a {
text-decoration: none;
}
For small projects I think it's fine.
I don't think it works that way (Home.css being applied only to Home controller actions). The different files are just for separation, to make it clearer what are the CSS rules describing. You can read this guide about the asset pipeline. I'm guessing you altered the default application.css.scss and removed the line importing all CSS files from app/assets/stylesheets.
TL;DR:
Ignore the comment, it's not made by Sass. But put:
#import "*";
into your application.css.scss file, and it will automatically import all the controller scss files.
Full read:
Disclaimer: This is my current understanding of the asset pipeline flow with and without Sass.
I think this comment is written by the standard Rails Asset pipeline (sprockets), and not by Sass:
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
The standard pipeline will handle scss files but doesn't presume an application.css.scss file. But if you create such a file with Sass, then Sass will compile it to the application.css file.
If you use the normal Rails asset pipeline, without Sass, then sprockets would load the css file into the application.css file automatically (if that file has the default *= require_tree . line in it).
When you use Sass, with an application.css.scss file, Sass will compile this file into a application.css file. (I assume it would overwrite or take precedence over any application.css file you already had).
To get your home.css.scss file (and other controller files) automatically included, put this line into your application.css.scss file:
#import "*";
For reference, see this question:
Is it possible to import a whole directory in sass using #import?