Order of requires in Asset Pipeline, Does it Matter? - javascript

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

Related

How does Rails load model_name.js?

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'.

Best way to call JS files?

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 .

Rails can't require a javascript file that exists in the same folder

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.

The bootstrap.js file - are these a unique type of server-side include? How should these files be implemented?

In the bootstrap sass download ( https://github.com/twbs/bootstrap-sass/archive/v3.1.1.tar.gz ) there is a strange bootstrap.js file with all of these lines here commented out, like so:
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover
These correspond to the folder below that has the js files named by each "require" line.
Are these some sort of special server side include system for javascript?
While we are on the subject, what is the best practice for including these files in a page? 1 by 1 as they are needed (more requests?) or simply pasting them into a master file as needed (more work indeed, and subject to change, more stuff to track).
Perhaps there is something I am missing here.
These JS files are intended to be loaded/compiled by Sprockets.
If you are not using Rails, look at a solution for sinatra: https://gist.github.com/datenimperator/3668587

Loading javascript files in rails 4

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?

Categories

Resources