I'm having a problem where my model_name.js file isn't getting loaded for some reason. However, I tend to remove require_tree . from application.js because this application has a lot of varying js and I don't want it all included by default.
Does removing require_tree mean my model_name.js doesn't get loaded?
Yes, removing //= require_tree . will not include the files under app/assets/javascripts. You can include it manually by adding //= require model_name on your application.js
You have to explicitly require the file in application.js as //= require 'file_name'.
Related
In a Rails application, inside application.js, what does the lines that start with //= require mean and what is the difference with a normal require();?
I'm new at web development, at the beginning I thought this were irrelevant as they appear as commented.
For example, this:
//= require cocoon
//= require jquery_nested_form
//= require jquery3
//= require jquery_ujs
//= require jquery
Rails uses Asset Pipeline(Sprokets) to bundle all js and css files in one and minifies it for better performance of the page loading.
app/assets/javascripts/application.js called manifest file where you mention your javascript files you want to include and the order in which you want to include using
//= require
Similarly for css, you have app/assets/stylesheets/application.css
/* ...
*= require_self
*= require_tree .
*/
require() in context of ruby is to load other file in current file so that it's functionality can be reused.
require in context of javascritp is to load javascript modules to be used in current context/file. It's CommonJS syntaxt. This comes into picture when you use webpacker gem.
Issue: I noticed my chartkick charts were not appearing and stuck on "loading..." within production.
I debugged and realized the reason is because i recently created a bunch of .js files under javascripts to cut down on <script></script> code within my views and instead using <%= javascript_include_tag "word" %>.
What the problem is, and the difference btween the charts showing and not showing is in my initializers/assets.rb folder is:
Rails.application.config.assets.precompile << '*.js'
Without this, it works, but also without it, i cannot load my independent JS files.
How can I load my JS files, under assets/javascripts/file_name.js and also have my charts working?
Is there a better way to call my JS files, without needing to use script tags?
Application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require popper
//= require bootstrap-sprockets
//= require jquery3 #i have this here and not over popper because if it isn't in this position, most of my javascript/jquery features under bootstrap do not work - i haven't figured this out yet. I will most likely use pure jquery/JS and remove all bootstrap JS if I cannot find this reason
//= require Chart.bundle
//= require chartkick
//= require_tree .
Just deployed a Rails 5.x application and installed a theme. The theme's contents are located within the app/assets/javascripts/theme-js and app/assets/stylesheets/theme-files folders.
Inside of the app/assets/javascripts/application.js file includes the following:
//= require jquery
//= require jquery_ujs
//= require_tree .
// Required for the SmartAdmin theme
//= require theme-js/app.config.js.erb
//= require theme-js/app.js
And inside of the app/assets/javascripts/theme-js folder are have the following files (included with the theme):
app.config.js.erb
app.js
application.js
The problem that I'm having is that inside of the application.js file contains a line that states: //= require app.config, but Rails generates me an error stating the following:
couldn't find file 'app.config' with type 'application/javascript'
Even though app.config.js.erb is in the same folder as application.js. Is there any reason why this would happen? Can't figure out why this won't work. I've even tried //= require app.config.js and //= require app.config.js.erb and neither one of them work.
I noticed that //= require ./app.config appears to work whereas //= require app,config doesn't. Something new with Rails 5.x perhaps? I'd have to modify all of the require statements to fit this unless I'm missing something.
Problem solved. Just needed to add the custom theme-js and theme-css folder to the assets pipeline so that Rails can search those folders for the appropriate files when using //= require <file>. Assuming this is what I needed to do, although I'm not sure if it's best practice.
I have a structure in my rails assets directory which is shown below.
--javascripts
-utils // directory
helper.js
session.js
app.js
application.js
home.js
This above is my directory structure in rails. When i load my application i get the below error which i feel is the JS is not getting loaded properly.
Uncaught TypeError: Cannot read property 'addMethod' of undefined additional-methods.min.js?body=1:3
Uncaught ReferenceError: Helper is not defined login.js?body=1:22
Uncaught TypeError: Cannot read property 'validate' of undefined
Below is my application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require vendor
//= require_tree .
Is there anything specific if we have to do for loading files from a specific directory?. How to load the Utils directory and other files in my application.js
From the docs:
Directives are processed top to bottom, but the order in which files
are included by require_tree is unspecified. You should not rely on
any particular order among those. If you need to ensure some
particular JavaScript ends up above some other in the concatenated
file, require the prerequisite file first in the manifest.
So if you need something from Utils to be defined before anything in, say, home.js I'd add require_directory utils above the require_tree . statement. I suppose this could be what's going wrong with your javascript and throwing the errors you posted.
This is what the docs say about require_directory:
You can also use the require_directory directive which includes all
JavaScript files only in the directory specified, without recursion.
Is there anything specific if we have to do for loading files from a
specific directory?
The way to do that is to use the require_directory or require_tree . directives on the other directory:
#app/assets/javascripts/application.js
#= require_tree ./utils
However, if you're using require_tree ., this will basically include all the directories under your parent (it's called recursion)
As Nicolay has mentioned, you're basically looking to include your JS in the correct order. Although I'm unsure as to why you're getting errors for login.js and additional-methods.min.js
It means your JS is trying to call them, but they are not loaded. This would only cause an error in the likes of precompilation (load order shouldn't be a problem if you're just running in dev)
The answer is to define your manifest as to include the various files when they're needed:
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require vendor
//= require bootstrap
But more importantly - how are the functions being called?
In my javascript application.js file I have the following
//= require search
//= require tutorial
//= require_self
//= require_tree .//message
Is there a problem with me putting //= require_tree .//stock after require_self? It looks like everything is working but I'm not sure of the implications of putting tree after self.
All that is doing is changing the order of where the javascript contained in application.js, if any, is concatenated with the rest of the assets. If you have any code in application.js that is required in search or tutorial, then it will not work correctly.
You can read more about directive in the RailsGuides.
Yes, order matters, thats why jquery is always on top, if you have any js that deppends on it, it wont work