New to JS, working on a D3 visualization and when I server my html file that has the JS script:
<script src="visualization.js" type="text/javascript"></script>
I end up getting this error message:
Failed to load resource: the server responded with a status of 404
(Not Found) visualization.js:1 Failed to load resource: the server
responded with a status of 404 (Not Found)
I've tried the following proposed solutions that I found on this site and others but nothing seems to work. I've tried:
Making the path more detailed by trying Map1/visualization.js and other variations of this with the correct directories.
Clearing the Cache and all browsing data.
Placing the js file inside the same directory as your HTML file (did that from the start)
Anyone know a solution? Not sure what is wrong.
My html file code:
<!doctype html>
<html>
<head>
<meta charset= "utf-8">
<style>
*{
font-family: "Helvetica Neue";
}
p {
font-size: 0.85em;
}
svg {
background: #efefef;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Socket io !-->
<script src="/socket.io/socket.io.js"></script>
<!-- D3 Link !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<!-- Topojson library !-->
<script src="http://d3js.org/topojson.v1.min.js"></script>
<!-- Visualization file -->
<script src="visualization.js" type="text/javascript"></script>
</body>
</html>
All my files for this project are inside the directory Map1.
Map1:
-map1.html
-package.json
-server1.js -> the file to that serves my html file
-visualization.js
-world.topojson``
It sounds like you're running the server from a different working directory to where the HTML/JS files are stored. If you have this directory structure:
app
└── static
├── index.html
└── visualization.js
... and you've launched the server from the app directory, then the browser will be looking for visualization.js here:
app
├── static
│ └── ...
│
├── index.html
└── visualization.js <-
Make sure you're running the server from the same directory which contains the visualization.js.
1. Step 1
Firstly, Make Sure that your Java Script file visualization.js is still exists or check that according to you,visualization.js should located in the same directory which your html file located.
2. Step 2
But if it isn't thats the reason for getting 404 error,I recommend you to
check the directory which your visualization.js file currently exists.
Try this;
Eg:- <script src="directory/visualization.js" type="text/javascript"></script>
In here I mean by directory is the directory what your visualization.js is currently located.
I have a few:
try putting the './visualization.js' in src.
Check the spelling.
Put this line at the end of the tag.
You can use an npm package assets.
After using it you may use method resolver.path().
Now, instead of writing this:
var url = '/assets/images/icons/create.png';
You can write this:
var url = resolver.path('icons/create.png');
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
When i want to put js file i get this error
GET http://localhost:3000/src/app.js net::ERR_ABORTED 404 (Not Found)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pug with Java</title>
</head>
<body>
<script src="src/app.js"></script>
</body>
</html>
Structure of the project
You need to build your app. If you open package.json you will see scripts to build the app.
Build it and include the js from build folder. If your index.html and js file is in same location you dont need to src/ in script src.
Most probably app.js will be changed to main.js after build. Check it in build folder.
Build command will be something like
npm run prod
or
npm run prod-en
Once you do a build you will not have the src folder.
In which file is your HTML? If it's in index.pug you should try <script src="app.js"></script> as it's in the same folder.
if you use express.js ,try this ,
add this code app.use(express.static(path.join(__dirname, ""))); into your app.js to identify the exacly path. to your file.js
I'm using Aurelia CLI (v1.2.0) with webpack (v4.41.0). Running the command au build --env prod works well and all necessary files are placed in a dist folder relative to the project's root as expected. However, a problem I'm seeing is the following in the generated .html file:
...
<body aurelia-app="main">
<script type="text/javascript" src="/runtime~app.66066bc9a3f8c86e3d5a.bundle.js"></script>
<script type="text/javascript" src="/vendor.bluebird~01be3b92.3dbcbc269195ad05c865.chunk.js"></script>
<script type="text/javascript" src="/vendor.setimmediate~a1c951f6.42ef81a6d814b4bc894f.chunk.js"></script>
<script type="text/javascript" src="/vendor.process~16c59945.ef28f3259f949d41518b.chunk.js"></script>
<script type="text/javascript" src="/vendor.moment~399b027d.9b9b0283b72b7237fb27.chunk.js"></script>
...
You see the src="/file_name_here" part in these script tags is not going to work as it's looking for files at the root of the main hard disk, not relative to the HTML file. If I add src="../file_name_here" then all works fine. Am I missing a webpack configuration somewhere?
Thanks for the assistance.
in your project, you have a webpack.config.js file.
there you should find the baseUrl property. change it to whatever suits you best.
for example: I want the bundle files to be in the same directory of the index.html file, regardless of their respective path on the server. (they will not always be in the root of my server).
so I just change the default '/' to '' (empty string.)
I am trying to use jqxGrid. I am trying to link to the js files. Here is the structure of the project
Main Project
src
(below within src folder)
index.html
jqwidgets folder
Within the index.html I have links to the js as such
<script src="jqwidgets/jqxcore.js"></script>
<script src="jqwidgets/jqxdraw.js"></script>
<script src="jqwidgets/jqxbargauge.js"></script>
Here is some documentation
Angular components doc
Also a demo of what I want to achieve
demo
Any help is appreciated!
I have error and am trying to solve it for hours.
My file structure:
-/node_modules
-/www
---bundle.js
---index.html
in index.html I have such code
<script src="node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="bundle.js"></script>
Problem is bundle.js is included fine, but ng-cordova.min.js gives 404 error
Cannot GET /node_modules/ng-cordova/dist/ng-cordova.min.js
Edit: I also tried this without success
<script src="/node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
<script src="../node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
I don't use express or express.static.
Judging by your project structure I'm betting that it is powered by Express.js. I'm also betting that the www folder was set as a static folder in the express app like this:
app.use('/', express.static(path.join(__dirname, www)));
In which case your server will only serve files located in the www folder. You need to include any client dependencies in the www folder:
-/node_modules/
-/www/
--lib/
---ng-cordova/
--bundle.js
--index.html
And then load them like so:
<script src="lib/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
UPDATE
Simply put node_modules inside the www folder, it should work fine.
The problem here is that you try to load your ng-cordova.min.js file from the index.html folder.
You should change:
<script src="node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
For this:
<script src="../node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
You are trying to load the file from the wrong directory.
You either have to use this path:
src="../node_modules/
or this:
src="/node_modules"
in case the above directory is your root directory.
What's also confusing is that the line you commented the error in is not the line the error actually comes from. Why are you trying to link to the file twice?
//Edit: As Romain was a minute faster than me he deserves the right answer reward I'd say :P Only if it actually solves your problem ofc :D