I am trying to learn backbone js from a project that was built by someone else. On the front main application.js file, all I see is commented require statements of the form
//= require vendor/modernizr-2.7.1.min
//= require vendor/jquery-1.10.2
//= require vendor/date.format
//= require vendor/math
However, these are not comments in reality and are import statements of some sort. Normally a double forward slash in front of a statement in a javascript file makes that line commented. But here, that is not the case for sure as removing any line from the file throws 404 errors in the console. Would someone tell me which library is loading files using this syntax?
Related
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 tried searching for a solution for this, but unfortunately nothing useful I could find came back.
I'm currently building a new Ruby on Rails application and attempting to include three.js to start practicing using it. In order to test if it was successfully required I'm using my browser console, but receiving the error:
ReferenceError: THREE is not defined
From what I saw on this question: Most efficient way to get a Three.js project to work in a ruby on rails app?
I should be receiving a return value.
I've tried both adding the three.js file in the assets/javascripts folder and using the threejs-rails gem here: https://github.com/marvindanig/threejs-rails with no success.
I've made sure to require it in the asset pipeline in the application.js file:
//
//= require three
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Does anyone have recommendations on what I should try next? My main issue right now appears that it's not being required correctly.
EDITED: Problem was solved. Turns out I was inheriting from the wrong controller model.
Take the Three.js file and drop it in your assets/javascript folder.
In your application.js make sure you have at the end "//= require_tree ." and it should be working fine. You should remove the "//= require three" line because rails loads it automatically and you shouldn't load anything before jquery and turbolinks or else things won't load correctly. If you want to add it to your project explicitly, add it at the end just before "//=require_tree ."
a.) Include your three.js file in
"app/assets/javascripts/three.js"
b.) in application.js file write #= require three
Make Sure server should be running. refresh the web page and type in web console(F12): Three, If it gives return result. it's done.
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?
Simply followed instructions from http://guides.spreecommerce.com/developer/asset.html but it just doesn't work. New js files are included and loaded, but if I create file with the same name say product.js.coffee original file is loaded anyway. Any suggestions?
All.js
//= require jquery
//= require jquery_ujs
//= require spree/frontend
//= require_tree .
I've been tearing my hair out over this problem all morning.
In the end what worked for me is to specify every single file I wanted to overwrite in /app/assets/javascripts/spree/frontend/all.js.
E.g., if you want to overwrite cart.js.coffee and checkout/address.js.coffee, your all.js should look like:
//= require jquery
//= require jquery_ujs
//
//= require spree/frontend
//= require spree/frontend/cart
//= require spree/frontend/checkout/address
//
//= require_tree .
Don't ask me why that's necessary. My understanding is that //= require_tree . should do that automatically, but it my case, well, it wasn't.
After creating an all.js file and redundantly specifying each file, this finally worked for me. But I'm a spree/rails noob, so there's quite probably a better solution.
Edit:
Actually, to get this working I had to put the above in /vendor/assets/javascripts/spree/frontend/all.js and remove /app/assets/javascripts/spree/frontend/all.js. Still confused why this is necessary and why require_tree doesn't pick these up automatically, but happy to finally get it working.
Backporting this patch for Solidus 2.1.0 solved my issue of replacing/overwriting JS assets [1].
The problem appeared to be that there was an issue with Sprockets where using require_tree or relative require prevented JS assets in the pipeline from being overridden.
In summary
Create a new file under your project's vendor/assets with the same filename as the JS file you're going to replace in Solidus. For example, to overwrite the file solidus_backend/app/assets/javascripts/spree/backend/flash.coffee, create a replacement file in your project at your_project/{app,vendor}/assets/javascripts/spree/backend/flash.coffee. [2]
Create the files your_project/{app,vendor}/assets/javascripts/spree/backend.js and your_project/{app,vendor}/assets/javascripts/spree/backend/templates/index.js in your project.
Copy the contents for the backend.js and index.js files from solidusio/solidus#1613 into your project.
Remove any requires for files that do not exist in your Solidus version, and keep any custom requires if you already had backend.js and index.js defined. [3]
Footnotes
Includes .js, .coffee, .hbs, and any other files that compile to JavaScript during the asset pipeline compilation.
Either directory between {app,vendor}/assets in your project will work since they should both be in the asset pipeline loadpath. It's a matter of preference how you want to organise Solidus extensions and overrides.
I had to remove spree/backend/images/upload from backend.js
and spree/backend/templates/products/upload_progress from index.js since I was using an older version of Solidus and those files didn't exist yet, so I would get an FileNotFound error from Sprockets.
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