I'm programming a project using HTML and JavaScript. I access my js code with the following script tags:
<script src="js/monthChanger.js"></script>
However, when running my program in Edge & Google Chrame, I keep getting
this error.
Why is this happening? Looking at my file directories there doesn't seem to be anything wrong with the way I declared the function.
check out this article on absolute and relative paths
you probably want this:
<script src="./js/monthChanger.js"></script>
The ./ makes it relative to the current folder.
Alright, so it turns out my issue had nothing to do with HTML.
I didn't specify this in the OP, but I was also using a Django's framework in my project. I had mistakenly assumed that static fields such as css, js, and images would be called the same way they are called in normal html files. However, after reading django's documentation on managing static files, I realize that this is not the case. I follow django's instructions and was able to get my code working.
Related
I would like to use this library (https://github.com/riichard/boolean-parser-js) (which is really just a function?) in my own project.
My project is contained in a single html file. In one of the functions, I've tried including the following:
var parser = require('boolean-parser');
I get the following error when I include this.
Uncaught ReferenceError: require is not defined
I have installed the library via the terminal, using "npm install boolean-parser". At the same level as my project, I see a file called "node_modules", which contains "boolean-parser".
I'm not sure if this is the right method of referring to the library...
I'm also not sure how to find out what it.
If possible, please explain terminology in your answer(s)-- I have limited background knowledge in this area, as this is essentially my first real web project!
Happy to include code upon request. Feel free to suggest tag additions!
P.S. Could it be a file path problem? Do I need to use something like Browserify?
P.P.S. If I include
<script src="node_modules/boolean-parser/index.js"></script>
then it seems like the library is working, but then I get an error from within it:
index.js:295 Uncaught ReferenceError: module is not defined
at index.js:295
It is because you are making client side project. Here is related question link
Listen, i created simple html page with 2 script tags. First contains src="index.js" which is in the same folder and edited as i said before. Second script tags is:
<script>
console.log(window.module):
</script>
And everything works. Check yourself again.
I have recently got a chance to explore one famous JavaScript library; In that library, I have found one strange way of referring JavaScript library from HTML page.
The application folder structure looks like this,
index.html contains the reference of subroot.js;
index.html
<head>
<title>Index</title>
<script src="js/subroot.js"></script>
</head>
subroot.js only contains the following code (i.e.,the relative path of root.js)
subroot.js
../../js/root.js
When I try to run the index.html, i get syntax error in the first line of subroot.js
Questions:
Is it right way to refer another javascript library by its relative path?
If yes, Why I get error message on the web page?
JavaScript by itself doesn't support loading files or referring paths. You need a module loader of some kind to achieve what you want. With the new version of the standard (ECMAScript 6) there is something called "imports" which you might find useful. I have experience using JSPM and the SystemJS module loader, which makes it pretty easy to connect the dots.
However, without using any additional tools you should just inject another script tag in your HTML.
Just reference root.js in the HTMl file not in the Subroot.js file, you can't reference another .js file from a .js file as far as I know.
<script src="../js/root.js"></script>
See Link
write this in subroot.js file
var x = document.createElement('script');
x.src = '../../js/root.js';
document.getElementsByTagName("head")[0].appendChild(x);
I have a web applictaion which use has the following folder structure
application_root
js
in the html, I refer the js like
<script src="../js/****"></script>
everything is file if I start the html page using file:///protocol, but when I use the web server, like http://loclahost:6000/application_root, I found the js cannot be loaded correctly.
How to solve this issue?
You need to start your path with /: <script src="/js/some.js"></script>
Anyway, this can be problematic because if you use a virtual directory, / won't work since it's the root path.
For example: /js/some.js is http://localhost/js/some.js, and if your web site is hosted in a virtual directory like http://localhost/myapp/js/some.js this approach won't work.
If you find above case part of your issue, you might need to use server-side code to get your application root (i.e. /myapp/) so you can concatenate /myapp/ to js/some.js and get the right URI.
Recently I added conf/ApplicationResources.groovy (using resources plugin) file to my project structure. Here I keep my modules definitions for javascript and css libraries. Before, I was importing libraries with classic g:javascript tag.
Now every time when javascript code changes (while server is running) I get client side js error saying
"Uncaught SyntaxError: Unexpected end of input".
So for each javascript change application needs to be redeployed, what I dont want.
I have also declared .js files to be excluded from resources plugin pattern, but the problem remains. Any advice/help will be appreciated.
Solution from Sérgio Michels that worked:
Add to Config.groovy: "grails.resources.debug = true;"
To avoid cache issues with the Resources plugin, in all my projects I'm using the config grails.resources.debug = true in Config.groovy.
You still use <r:require modules=""/> in your GSP, but in development mode the source will show all files included instead of merging them.
I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.