I'm unable to load js and css files in JSP file. In desktop it runs as http://localhost/ but in server it will run as http://localhost/myapp/. How can I ensure it works everywhere?
GET http://localhost:8080/js/jquery.min.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8080/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
In head Head tag I have this..
<script src="/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
Edit: I tried the following and it's still not working..
Edit: even tried the following as suggested in this article
Fixed it.
I moved the css and js folder to src/main/resoucres/static/ and also I had to remove #EnableMVC from the Application.java and then it started working.
Also I had to add {pageContext.request.contextPath} to index.jsp otherwise it wouldn't work on the server since the URL would be http://localhost/myapp/.
<script src="{pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="{pageContext.request.contextPath}/css/bootstrap.min.css">
Related
I have deployed my project on Github and it gives this 👇
errors on the console and how may i fix it?
and link to the git is: https://blessja.github.io/Bottelary/
github repo: https://github.com/blessja/Bottelary
Change the incorrect file URLs in the index.html.
For example, you have written <link rel="stylesheet" href="/css/main.css"> which targets to https://blessja.github.io/css/main.css, which gives a error 404.Instead type <link rel="stylesheet" href="./css/main.css"> or <link rel="stylesheet" href="css/main.css"> which will get you to the right file, i.e. https://blessja.github.io/Bottelary/css/main.css
And try changing all the incorrect file paths mentioned in the index.html file.
Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</html>
How can I make this work in offline? This is in my index.html:
<link href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css' rel='stylesheet'>
Update:
There's a line in the css that contains http call to get the font css, do I
need to download it offline as well?
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");/*!
Download the minified CSS file from Bootstrap and store it in an external CSS folder - then call it into the page as an external CSS resource
for example:
<link rel="stylesheet" href="css/bootstrap.min.css">
Download Boostrap file and Save it.
https://v4-alpha.getbootstrap.com/getting-started/download/
basic syntax :
<link href='Path/yourNameFile.css' rel='stylesheet'>
Path is interpreted relative to the source of the Html file.
For Example : if Your bootstrap file is in Folder MyBootstrap and so This Folder and Html file are some Place,Your code must be like this :
<link href='MyBootstrap/YourNameFile.css' rel='stylesheet'>
If you want to use bootstrap files below in offline then just download these file on you PC.
Then remove text from https till just before the main file
Remove integrity & crossorigin attribute contents
Wolla! now you can see bootstrap files without CDN links.
The reference links & sheets wont work till you Remove integrity & crossorigin attribute contents.
Go ahead with this tip & tell me if it worked for you.
i.e
<link rel="stylesheet" href="bootstrap.min.css" >
<script src="jquery-3.4.1.slim.min.js" ></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js" ></script>
Place the bootstarp files in the same folder with html files as you are giving the relative path. If you have saved bootstrap files in a folder the give src="foldername/filename" path.
you have to download the css files and then use somethin like this
<link href="css/bootstrap.min.css" rel="stylesheet">
you can see more here: https://getbootstrap.com/getting-started/
Go to http://getbootstrap.com/ and download bootstrap put it in the same folder as your html and call it like this.
<link rel="stylesheet" href="css/bootstrap.css"/>
The best way to download usable bootstrap js and css files on your local folder and use it, after that automatically increase your page speed.
In addition to gavgrif's answer you will also need the file at this:
https://code.jquery.com/jquery-3.4.1.min.js
and this command to be pasted in section:
<script src="jquery-3.4.1.min.js"></script>
I recently finished up a mock site for a project that looks perfect locally. However, when I uploaded it to my server and Github pages, none of the styling is added. I checked the console, and see this:
Failed to load resource: the server responded with a status of 404 (Not Found)
style.css Failed to load resource: the server responded with a status of 404 (Not Found)
/favicon.png Failed to load resource: the server responded with a status of 404 (Not Found)
reset.css Failed to load resource: the server responded with a status of 404 (Not Found)
style.css Failed to load resource: the server responded with a status of 404 (Not Found)
So, I checked the sources in DevTools, and see that in my "resources" directory," there are two folders that don't actually exist: CSS and CSS_reset. Well, "CSS" is there, but it's referenced in my HTML as "css," so that's breaking the styling. CSS_reset doesn't exist AT ALL. Here's a screenshot of my directory tree on my server:
http://imgur.com/AQGY5W8
And here's the HTML referencing the CSS:
<link href="./resources/CSS_reset/reset.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link href="./resources/CSS/style.css" type="text/css" rel="stylesheet">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Monoton%7COpen+Sans:400,600,700" rel="stylesheet">
And here's the link to Github:
https://github.com/pauljhollis/jumpstart
I've uploaded about 15 pages to this server and github, and have NEVER seen this happen before. I have no idea what's causing this, and have checked all through devtools, and removed/re-added the files on my own server several times. Any help is greatly appreaciated.
Edit: Answered. Something changed my code and changed "css" to "CSS" and added "CSS_reset," which isn't even a directory on my computer. This didn't happen on my pc last night, but I'm working on a different one today. Super weird. Thanks for the help/suggestions. I didn't even notice this had happened.
Try:
<link href="../resources/CSS/style.css" type="text/css" rel="stylesheet">
Another method is to use a base tag...
<base href="https://www.[yourwebsite].com/resources/" target="_blank">
...then link to the resource accordingly:
<link href="CSS/style.css" type="text/css" rel="stylesheet">
Also, note the CSS directory. I would make sure that's how it's spelled on the server. Some are case-sensitive, so if the dir was "css" and you called "CSS", it wouldn't find it.
hello i have a problem with my 404 error handling.
i added to htaccess:
ErrorDocument 404 /404.php
so in case of typing something like:
www.domain.com/abc
everything works fine with my php page. the problem will be when typing something like:
www.domain.com/abc/
means adding a slash to the url the 404 error page appears but doesn*t load the css file?
if there is someone who could tell me whats going wrong over here, i really would appreciate.
thanks alot.
Since the 404 page will be displayed from any URL, you will need to use absolute paths for any external page assets like CSS files, images, JavaScript files, etc.
So any relative paths...
<link type="text/css" rel="stylesheet" media="screen" href="site.css" />
will need to be changed to absolute paths...
<link type="text/css" rel="stylesheet" media="screen" href="/site.css" />