I am working on a fully functional, existing Rails app. A friend of mine just built a few new front-end pages for me, but he just built them in html, with some JavaScript files.
Adding in the HTML has been easy, but I cannot figure out how to get the corresponding JavaScript files working.
I have imported all the JavaScript files into the app/assets/javascripts folders, and added them to the application.js file like this:
//= require modules/alerts
//= require modules/dropdown
etc.
But none of the JavaScript shows up - I threw some console.log lines in them just to test, but the lines never show. What else do I need to do to connect these JavaScript files?
Current structure:
app
assets
javascripts
modules
application.js (also inside javascripts folder like modules folder)
I am also getting this alert in console:
mobile-nav.source.js:23 Uncaught ReferenceError: alerts is not defined
at mobile-nav.source.js:23
But just checked the mobile-nav.js file and line 23 has nothing about alerts.
I think my error is coming from modules/init-modules.js - I am adding in alerts: alerts to the var Modules object, and when I do that, it seems to break all the other js. Is there something I need to do first before I can add to this file?
EDIT: Found the issue! Thanks for everyone that helped. There was a variable being declared incorrectly, but the way it was throwing the error made it hard to find.
Related
Ok a very basic question, but I'm completely new to Javascript.
So I'm using Javascript in a Rails project, I need to use Uppy, a lib for image uploading, but whatever, this a general question on including Javascript libraries in Rails. I included the required library in my project using npm, and I included the location of the index.js file in application.js like
//= require #uppy/core/src/index.js
Now checking from the console, this is loading alright.
Now in my view file, views/photos/new.html.erb I included the script suggested in Uppy that begins with
<script>
// Import the plugins
const Uppy = require('#uppy/core')
const XHRUpload = require('#uppy/xhr-upload')
const Dashboard = require('#uppy/dashboard')
</script>
I'm getting error require is not defined
Now I understand that since I used the require in application.js I do not need to reuse the "javascript" way in the script I'm writing. What should I do instead however to initialize the variables Uppy, XHRUplad and Dashboard?
I am bundling 6 different modules together in Webpack. One of then is Mustache.js.
The Mustache templates live inside the HTML page. They are not in a separate file. Now when I load my page ... I get this error ...
This is my app.js file
require('mustache');
require("./js/modules.js");
require("./js/custom.js");
require('owl.carousel');
require('bootstrap');
require("expose-loader?$!jquery");
I have tried changing the order, but nothing is working.
The 'modules.js' file has a dependency on 'mustache'. So I went into the modules.js file and added require('mustache'); at the top in that file, but nothing changed. Do I need to add any additional configuration to my webpack.config.js file ?
If I take the Mustache.js modules out of the bundle and load it normally on the html page like <script src="js/mustache.js"></script> then everything works fine.
Can someone please advise how can I include this module in the bundle ? Already wasted so many hours trying to make this work, but to no avail. Many thanks in advance.
It sounds like it's working when not bundled because you reference the script directly in the DOM and Mustache is added to the global scope, in this case window.Mustache.
In your app.js or any other 'bundled' script that is referencing Mustache you'll need to require and assign to a variable:
var Mustache = require('mustache');
Under my wwwrooot folder I have a sub folder named scripts which has the following structure:
scripts (folder)
options.js
components (folder)
require.js
jquery.js and many more in this folder
I have the following script on my ASP.NET webpage (under _Layout.cshtml):
<script src="~/scripts/components/require.js" data-main="scripts/options"></script>
This is supposed to go to my wwwroot folder to scripts/components and start require.js, where as a parameter I am passing script/options.js file.
(quick note: this was given to me, I did not create it).
Unfortunately, it returns the error that it could not localize my options.js file. By looking into the console window, the GET function should be expecting the following path:
http://localhost:8000/scripts/options.js
whereas on my page GET function is trying to access the following file:
http://localhost:8000/app/scripts/options.js
I believe it is caused by the fact, that my MVC start page is under App controller (to be more precise it is App/index.html).
I believe (correct me if I am wrong), that the problem can be fixed by somehow removing the /app/ from the search string. Unfortunately, I don't quite know how to do it.
Any help on this matter would be more than welcome.
My Rails project contains TypeScript files which are being translated into JavaScript. For every translated .js file I also get a .js.map file. An example file structure is as follows:
/assets/javascripts/resources/Setting.ts
/assets/javascripts/resources/Setting.js
/assets/javascripts/resources/Setting.js.map
And in my application.js I simply do
//= require_tree .
The problem is that when this whole things gets rendered I get the following HTML (for each TypeScript file I have):
<script src="/assets/resources/Setting.js?body=1"></script>
<script src="/javascripts/resources/Setting.js.map.js"></script>
As you can see - for some reason Rails thinks that Settings.js.map file is to be included and automatically adds .js to it.
If this means anything - the TypeScript compilation happens only at IDE level, so it is not integrated into the Rails in any way.
Rails version: 4.2.1
So.. how do I exclude those map files?
My apologies if this has been posted somewhere else, but I'm not exactly sure how to even phrase a search for this problem.
Basically, I've got fullcalendar.js sitting in app/assets/javascripts/. Within my application.js file (in the same folder of course) I've got the following...
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
So, as expected the fullcalender.js gets swept up in the asset compiling process and ends up in the application.js that is then served to the user.
The problem comes in when I try to reference a function defined in fullcalendar.js (and thus defined in application.js after compiling the assets) it throws an error stating TypeError: $(...).fullCalendar is not a function in the js console of firebug, and of course full calendar doesn't render.
Now, however, if I include <%= javascript_include_tag "fullcalendar.js" %> in the layout file after all of the other scripts and stylesheets have been pulled in, it works as expected.
Baffled, I looked into the js in each file and compared them and can't see a difference. Is there something going on with the asset pipeline that I'm not aware of or is this some freaky DOM issue? I just have no idea at this point.
For reference, here are the contents of both the application.js and fullcalendar.js that are linked to in the page source of the site. I've only included the relevant full calendar portion of each, as it's too large for gist or pastebin if I include everything.
What baffles me is that both the sources come from the same file, one is just linked to directly, the other flows through the asset pipeline process.
application.js - http://pastebin.com/byyNErB8
fullcalendar.js - http://pastebin.com/k4p29YmP
Any insight or help would be GREATLY appreciated.
Maybe a dependency error. I'll suggest you to use a better practice for such lib.
Put the fullcalendar scripts into vendor/assets/javascripts
Require this script manually in application.js before the tree and after jquery and any other lib it depends.
/=require 'fullcalendar`
Add
Check the loaded Javascript files in header, if application.js is the last, you have dependency error. The lib must be there before calling it.