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?
Related
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.
I'm struggling to understand how to incorporate vendor js assets into my Rails 4 application.
My app uses bootstrap. The vendor files include a js file, called npm.js. That file has the following in it:
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
In my app/assets/javascript folder, I have a file called application.js. In that file, I have:
//= require npm
In my console inspector, I can see an error with the incorporation of the npm file. The error message is:
npm.self-f66d504….js?body=1:2 Uncaught ReferenceError: require is not defined
I think it might be something to do with the ../.. references that are set out in the npm.js file.
Does anyone know how to adapt this for use in rails 4 (hosted on heroku)?
Thanks very much.
Those require(...) statements in your JS are in the CommonJS format (hence the comment at top) and are commonly used in Node.js but aren't supported in browser environments which is why you're getting that error in the inspector.
One option is to use Browserify with Grunt to link and compile each of those JS files into a single npm.js (though I'd recommend a different name) file. Are you already using browserify_rails, Grunt, or a similar tool to manage your JS files?
If you haven't worked with Grunt/Browserify, or if the above statement is unclear, it's probably best and simplest to just stick to the Rails asset pipeline:
So application.js would become:
//= require('<path>/js/transition.js')
//= require('<path>/js/alert.js')
//= require('<path>/js/button.js')
//= require('<path>/js/carousel.js')
// etc...
Instead of:
//= require npm
And this should generate equivalent JS to your sample above.
Finally, make sure <path> is included in your config.assets.paths config variable.
I just want to ask how to use the jquery custom builder since i separate the folder of jquery custom builder to the Login Folder. Here is the folder path for the jquery custom builder
And here is for the Login Folder
I have tried this kind of syntax for getting the Directory of the js file and to other files to but it doesn't seems to work.
<script src = "../htdocs/WebSite/jslib/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
i hope you can help me with this since i'm just starting jquery i also read the guide for using jquery i follow the instruction but it's still the same.
Thanks
Where is the html file that imports jquery script tag? It seems like just path problem. Usually, URI paths are based on app server root. There are so many ways managing URI, but XAMPP might let file resource paths show up same as URI paths.
When app server root is located on c:/foo/bar/:
c:/foo/bar/lib/jquery.js -> http://localhost:xxxx/lib/jquery.js
c:/foo/bar/index.html -> http://localhost:xxxx/index.html
So in index.html, import resource as this way.
<script src="lib/jquery.js"></script>
I have been playing around with ember 1.13 and I can see that in some online tutorials they require js and css via index.html while some uses ember-cli-build.js or brocfile.js for older versions. I find it requiring properly when I use ember-cli-build.js but then I am not sure what exactly the use of index.html
It depends.
If you have a ember-cli-plugin it will add the files to the vendor files by itself normally. Like with ember-cli-materialize.
If you are installing a random bower package like Ladda, you would need to add the files you need manually to ember-cli-build.js:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
});
app.import('bower_components/ladda/dist/ladda-themeless.min.css');
app.import('bower_components/ladda/dist/spin.min.js');
app.import('bower_components/ladda/dist/ladda.min.js');
return app.toTree();
};
This will then be merged into your vendor.css and vendor.js which are linked to from index.html.
Also when you build the app the bower_components won't be available unless you've explicitly included something, so you cannot just link to them from index.html. It would also be a waste of network resources to include files separately. You shouldn't have to include anything in index.html unless it's an external resource.
brocfile.js is the old name for ember-cli-build.js since they've stopped using broccoli. Just use the newer one.
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?