I'm a beginner at web dev, I'm currently working on a project, but the javascript file insert.js won't load. The html document, upload.html is inside the public folder, and the javascript is inside the main folder.
I used the following path to link the javascript file,
<script src= "../insert.js"></script>
But it didn't seem to work, so I then tried moving upload.html to the main folder, which is HR and I used the following code,
<script src = "/insert.js"></script>
And this didn't work either, so I then tried moving insert.js to the public folder, and used the same path as I have mentioned above, but, then I couldn't export variables to app.js which is located in the main HR directory.
The image I have attached shows location of the files
I don't get what could possibly cause this, I think I should mention this as well, but I got an error while running my javascript file in node. So I inserted the following code in node_modules/whatwg-url/dist/encoding.js:
const {TextDecoder, TextEncoder} = require("util");
I don't know if this has anything to do with my issue, but I thought I would just mention it.
localhost can only access your public folder, so you have to move insert.js in the public folder and do:
<script src = "index.js"></script>
Also if you have node modules in that javascript file it wont run because it can't run the modules and you would have to use a bundler for that js file like webpack, rollup or snowpack.
Related
I just set up a very basic Spring Boot Web Application with Thymeleaf, but I can't access my external JS file from the corresponding HTML file of my template and can't figure out why.
My resource folder structure is as follows:
static/
index.html
css/
graph.css
js/
createGraph.js
templates/
visualizeGraph.html
Within my visualizeGraph.html I try to call the createGraph.js using following snippet within the <body> element:
<script th:src="#{/js/createGraph.js}" type="text/javascript" >
</script>
In the <head> element of visualizeGraph.html, I added my stylesheet using following snippet:
<link rel="stylesheet" type="text/css" media="all"
href="/css/graph.css" th:href="#{/css/graph.css}" />
My Spring Boot Web Container runs on Port :8082, so I access my webapplication from localhost:8082 and access the visualizeGraph template from localhost:8082/visualizeGraph
When I check the Developer Console (F12), it throws a 404 for the createGraph.js file, but not for the graph.css file -> it can find the css successfully.
I can even access the css through localhost:8082/css/graph.css but CAN'T access the js-file using localhost:8082/js/createGraph.js (throws a 404 - as expected)
I can't figure, what's the cause for this phenomenon as my application.properties also has no additional parameters for modifying the resource source folder etc.
Okay, this was VERY weird. I found the solution, but I am not sure, whether it's IntelliJ, which was responsible for this problem or something else.
What I did was to edit my <script> element in my HTML file to the following:
<script src="/js/createGraph.js" type="text/javascript" >
</script>
and my intention was solely to try out, whether it would change anything. Somehow, IntelliJ told me, that it was not able to find the path (neither the js folder, nor the createGraph.js file within it) so what it suggested was to create the folder and the file (so I did, using ALT+Enter). What I did afterwards is to just copy the content of my old createGraph.js to the new file and to delete the (very strangely the same named) old folder and file and voila, everything works as expected... Very weird.
You can call your JS files present in resources/static folder like below:
<script type="text/javascript" src="js/script.js"></script>
No need to give the forward slash before the js folder.
below I am attaching screenshot for my code:
Here, I was having images folder inside the static folder so we can directly call that folder.
If you have any further doubts please feel free to visit my github amisham96
I'm working on a node.js application to interact with the Twilio API. I have a problem getting my files to associate in the way I expected. My file directory structure looks like this
myapproot
-public
---form.js
-routes
---index.js
-views
---index.html
-app.js
-config.js
-server.js
In index.html, I conclude the page with the following script declaration:
<script type="text/javascript" src="../public/form.js"></script>
But when I load up the page, I get the following error:
GET: http://localhost:1337/public/form.js 404 (not found)
If I follow the path-link provided by VS code, it shows that js file, but it's not getting loaded into my view. Is there a mistake with my path declaration?
Essentially, what that command is doing is this:
<script type = 'Text/JavaScript' src = 'http://localhost:1337/public/form.js'>
So, what I'd suggest that you try is to set up the server-side code to handle requests to that directory on your server.
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.
I'm running a node.js server. In the node I require and run the module by using
var h = require('h.js');
h.hello();
This prints Hello World to the console. However, I want to be able to run the code from h.js from a page(entrypage.html) in my browser as well. I try to import it by
<script type="text/javascript" src="/node_modules/h.js"></script>
However, this gives a 404 error when run on localhost.
GET http://localhost:8080/node_modules/h.js
How do I get access to this javascript file on the HTML page?
My file structure has a root with html/, js/, node_modules/ and server.js. The HTML page is inside html/, the js file in node_modules/
EDIT: I'm using the MEAN stack for this - MongoDB, Express.js, Angular.js and Node.js.
It should be possible to serve the file using express.static (Example: app.use('/node_modules/', express.static(__dirname + '/node_modules/'));), but I highly advise against serving node_modules and backend-specific files in the frontend!
first define path for your static resource which is your CSS,JS,Images etc.
app.use(express.static(path.join(__dirname, 'node_modules')));
then in html
<script type="text/javascript" src="h.js"></script>
NOTE :
Try to avoid to use node_modules folder for source path of your static resources
To be honest I'm not exactly sure what you're trying to achieve, I take it that you want to run the code in the browser just like running code in the node.js environment using require to include packages like h.js from npm.
If that's what you want to do I would recommend using a tool like browserify or webpack which collects your code and puts it into a file which can then be used in a web browser.
I am testing my website code, and I have the following folders in my working directory:
css
js
img
html (contains index.html)
When I try to bring up my website locally (the "index.html" inside of the html folder), none of the css or js files were found (404 Error).
However, before I made an html folder everything was linked together fine, and my file setup looked like this:
css
js
img
index.html
Also, when I created an "html" folder and put "index.html" inside of it, I changed the html code so that it would refer to the other files appropriately (from what I've seen on various websites):
<link href="../css/my_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/touch_functionality.js"></script>
<img src="../img/display_photo.jpg" alt="Display Photo">
Additional Information:
I am using a local Apache server to access the "index.html" file, and I have set the DocumentRoot for the VirtualHost I made to the "/html" folder.
Additionally, I thought this may have been a permissions error, but I downloaded Cygwin and I used "chmod 711" on all of the folders in my working directory and I have used "chmod 644" on the "index.html" file inside of the html folder, but the files still wouldn't be found.
I've done my research on this for quite a few hours, but unfortunately I haven't come across a solution for this yet. Any help would be much appreciated, thank you.
Update
If I change the DocumentRoot to where all of my working space directory (instead of html) and place a .php file that simply contains the following line of code:
<?php require("html/index.html"); ?>
where my folders reside so my working directory looking like this:
-css
-js
-img
-html (contains index.html)
-index.php
Everything will work correctly. However, I would have to believe there is a way so that I don't have to do this "work-around" method. Any insight would be incredibly helpful, thanks again.
The reason being is that the web server only allows one to view files in the html directory or below.
Otherwise it will somebody to access any part of your file system.
Would you like that?
To fix this go back to the configuration that works,