Hi I am working on standalone java application running on some port number.
I am trying create UI with HTML where it includes some external js files.
I have included those files in header tag as below.
<script type="text/javascript" charset="utf-8" src="js/jquery.json-2.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
But it always gives the error message as "Filed to load resource:the server responded with status code of 404.
Any ideas?
Seems like a pathing issue to me.
What is the relative location of your "js" directory from the calling page in your file system?
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
Calling on the react experts haha.
I am trying to import/include some external javascript files into my React project, these js files cannot be changed or edit as per instructions from my company, as this is a base for many application that uses them.
For reasons i wont be putting the real filenames and folders.
There is a folder in my public folder called "testModules", so path is public/testModules/
all the files / 3 files that i need to include is in there.
What i have tried so far.
In my index.html file at the bottom i have tried the following
<script type="text/JavaScript" src="%PUBLIC_URL%/testModules/test1.js"></script>
<script type="text/JavaScript" src="%PUBLIC_URL%/testModules/test2.js"></script>
<script type="text/JavaScript" src="%PUBLIC_URL%/testModules/test3.js"></script>
and
<script type="text/JavaScript" src="./testModules/test1.js"></script>
<script type="text/JavaScript" src="./testModules/test2.js"></script>
<script type="text/JavaScript" src="./testModules/test3.js"></script>
and
<script type="application/javascript" src="./testModules/test1.js"></script>
<script type="application/javascript" src="./testModules/test2.js"></script>
<script type="application/javascript" src="./testModules/test3.js"></script>
and
Then i have also tried using the ScriptTag plugin "react-script-tag"
with the same examples as above, but instead of %PUBLIC_URL% i used process.env.PUBLIC_URL
When i try any of the above it works on my local development env. For example running npm run start and opening on localhost
But as soon as i move to application to a live server i get the following err
Refused to execute script from 'https://test.com/testModules/test.js'
because its MIME type ('text/html') is not executable, and strict MIME
type checking is enabled.
For all the files i added.
Now i open up my dev console and i can see the scripts are appended/included in the body at the bottom.
What is going on and how can i fix it.
Thanks You
If you wouldn't like to make any improvements to your deployment architecture, then you should pretty much talk to "your backend devs" so that they configure the web server so that this particular route would emit a different MIME type while serving this particular static file.
Alternatively, if possible, you could use Webpack to statically link the third-party code base to your React project so that they are distributed together. This way, if you use any implementation of Javascript modules, you will eliminate this crutch of your library being visible at the scope of the HTML host and this might bring improvement to your codebase.
I have an simple Express application defining routes for an html file in my public folder. In this index.html file i have linked my css and js file which are in the same folder. When i use npm start it works without any problem but when i publish it on zeit-now i get error 404 for js file and "Refused to apply style from 'https://test.julienmerasli.now.sh/public/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled." for css file.
Here is my deployment : https://test.julienmerasli.now.sh/
Here is my project: https://gitlab.com/chaudoinblazin/test-zeit-now-css
Looking at your code - I think the problem is with the paths you used to reference the css and js files.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="public/style.css">
<script type="text/javascript" src="public/index.js"></script>
<title></title>
</head>
<body>
<button onclick="buttonClicked()">This is a button</button>
</body>
</html>
The files served from the public folder will be available from your root of the website so e.g. https://test.julienmerasli.now.sh. Right now though your html will look for the css and js files in https://test.julienmerasli.now.sh/public.
So inside the html you just have to remove the public part on the href and src paths and this should work.
Not sure what you're trying to build but if you just wanna serve some static or simple API files, you might not need Express. Check out this migration guide for a good intro.
I had a java script in my JSP, which worked fine. Now I want to move it to it's own file (abc.js). I created js-Folder and placed it there.
I tried to include it with <script language="JavaScript" type="text/javascript" src="./js/abc.js"></script> which links to http://localhost:8080/ProjectName/js/abc.js (from link in HTML-Code of the page). I think this should be correct, isn't it?
Nevertheless I get errors in the browser console (Failed to load resource: the server responded with a status of 404 () abc.js)
Do I have to register the .js somewhere to be recognized?
Edit: My project structure is like this:
ProjectName
|---WEB-INF
|---page.jsp (that wants to include abc.js)
|---js
|---abc.js
The WEB-INF directory is not publicly accessible. Your HTML file accesses the JS file over an public URL. Details see here: Include javascript file from inside WEB-INF
So the solution for your problem is to place the JS file on the same level as the WEB-INF directory, so that it is served publicly and adjust the src link accordingly:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/abc.js"></script>
(How include an external JS file in a JSP page)
I have a web service project in eclipse, and i deploy it to Tomcat by right clicking on the project and click on run on server. The following script tag is in one of the html pages:
<script type="text/javascript" src="../assests/js/lib/yui_3.6.0pr3/yui/build/yui/yui-min.js"></script>
The html page is located in folder called SamplePages which is contained in the folder TEST-WS/production, the folder assets is also in TEST-WS/production.
When i open this page in the browser, i get the following JS error:
GET http://localhost:8080/TEST-WS/production/assests/js/lib/yui_3.6.0pr3/yui/build/yui/yui-min.js 404 (Not Found)
The path TEST-WS/production/assests/js/lib/yui_3.6.0pr3/yui/build/yui/yui-min.js is correct and the .js file is there. I have other scripts like:
<script type="text/javascript" src="../assets/js/lib/all-concat.js"></script>
but it works fine. what could be the problem?
src="../assests/js
src="../assets/js
One of those paths is probably wrong.