CSS file is not loading?

1
votes

I am having a JSP file with the below codes

 <HTML>
 <head>
 <link rel="stylesheet" type="text/css" href="../CSS/home.css" />
 <link rel="stylesheet" type="text/css" href="../CSS/left.css" />
 <script type="text/javascript" src="../js/friend_request.js"></script> 

 </head>
 <body>
 <div class="menu">
 <form name="search_form" method="post">
<table id="menutabel" class="color">
  <tr>
   <td class="alt"><A class="one"HREF="home.jsp">Home</A></td>
   <td class="alt" ><A class="one"HREF="../HTML/falbum.html">My Album</A></td>
   <td class="alt" ><A class="one"HREF="../HTML/MyDiary.html">My Diary</A></td>
   <td class="alt" ><A class="one"HREF="../HTML/MyFriends.html">Myfriends</A></td>
      </tr>
    </table>
 </form>
 </body>
 </html>

When i run this JSP file individually on the server both the CSS file and the Java script file are loading correctly ,but the problem is when i forward the request from a servlelt both the CSS and the Java Script file is not loading. Can anyone help me out with this problem?

I am having all the html, jsp, CSS, java script into separate folders.

Like

Web-content
|

|-- HTML (This folder will have all the HTML files)

|--- CSS (This folder will have CSS files)
|--- js
|--- JSP

5
javajavascripthtmlcssservlets
What is the URL you use to access your servlet? – brabster
i am using <localhost:8080/"Projectname"/"Servletname"> to access the servlet, can i know why you are asking this? – Hariharbalaji

5 Answers

4
votes

Make use of the HTML <base> tag. It denotes the base URL of all relative URL's used in the final HTML output. If you set it with HttpServletRequest#getContextPath(), then ALL links in your page will be relative to the http://example.com/contextname URL, which is http://localhost:8080/Projectname in your case.

<!doctype html>
<html lang="en">
    <head>
        <base href="${pageContext.request.contextPath}">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <ul>
            <li><a href="html/page.html">HTML page</a></li>
            <li><a href="jsp/page.jsp">JSP page</a></li>
        </ul>
    </body>
</html>

Note that you should not start the relative URL's with /, otherwise they will lead to the domain root, e.g. http://example.com/yourlink.

By the way, links doesn't need to be placed inside a form. Also HTML tables ought to be used for tabular data only, not for other content. Learn semantic HTML as well.

3
votes

Use <c:url> to resolve absolute URIs (this example assumes that ".." in your code is a webapp root):

<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<HTML> 
 <head> 
 <link rel="stylesheet" type="text/css" href="<c:url value = "/CSS/home.css" />" /> 
 <link rel="stylesheet" type="text/css" href="<c:url value = "/CSS/left.css" />" /> 
 <script type="text/javascript" src="<c:url value = "/js/friend_request.js"></script>  

 </head> 
 <body> 
 <div class="menu"> 
 <form name="search_form" method="post"> 
<table id="menutabel" class="color"> 
  <tr> 
   <td class="alt"><A class="one"HREF="<c:url value = "/home.jsp" />">Home</A></td> 
   <td class="alt" ><A class="one"HREF="<c:url value = "/HTML/falbum.html" />">My Album</A></td> 
   <td class="alt" ><A class="one"HREF="<c:url value = "/HTML/MyDiary.html" />">My Diary</A></td> 
   <td class="alt" ><A class="one"HREF="<c:url value = "/HTML/MyFriends.html" />">Myfriends</A></td> 
      </tr> 
    </table> 
 </form> 
 </body> 
 </html>
2
votes

These files are loaded from the client which will interpret relative links to the base URL. If you are internally forwarding a request to a different servlet, you have to pay attention to what the client thinks is the URL. It may be necessary to switch to absolute links or generate a base tag.

These types of problems are easily seen client-side debugging with Firebug or Safari for example. You're probably getting 404s on the css and javascript links.

1
votes

When external files like css and js not getting loaded then use the absolute path. Example:

<%=request.getRealPath("/")%>
0
votes

I'd examine the server logs to find out the URLs that are being requested by the browser when it loads this page and its dependents.