Can't access CSS and JavaScript files in JSP

Question

I am developing a application in JSP/Servlet using MVC. In this application I want to load index.jsp as welcome page and this page retrieves the data from database. I did it. Now the problem is that when index.jsp page loads it fetches data from database but it shows it on browser as plain text and my CSS is not working for it.

I know that during translation phase JSP is converted into servlet and after processing it send output to browser so during that we have to write the relative path of the .css files. I tried almost tutorials and questions in Stack Overflow but its not working. I tried ${pageContext.request.contextPath} to retrieve context path but its not working.

In this application my target is showing news updates on index.jsp page. So I am fetching data and showing it on JSP. To achieve this first controller runs and it fetch data from Database using DAO class. Then DAO Class returns that data into list to controller and controller then put data into RequestDispatcher and send it to JSP. Now when I am running application I get data on browser but it shows just plane text data not showing CSS effects. while when I set index.jsp as welcome page and from it when I type URL pattern then it shows fine but currently my welcome page is not set to any page and url-pattern is / so all that i need is performed well but CSS effects are not applied to output so how can I solve this it?

Here I am posting Eclipse snap please give me suggestions.

Directory Structure :

-MVCTest
   -src
   -build
   -WebContent
      -css
        -style.css
        -demo.css
      -js
        -jquery.js

Code of web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>SwavaMVC</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <servlet-name>Visitor</servlet-name>
    <servlet-class>controller.Visitor</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Visitor</servlet-name>
    <url-pattern>/asdfD</url-pattern>
  </servlet-mapping>
</web-app>

Code of servlet class:

package controller;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
//import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.NewsDAO;
import model.classes.News;

//@WebServlet("/Visitor")
public class Visitor extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public Visitor() {
        super();
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    {
        try {
            List<News> NewsList = NewsDAO.getNews();    
            request.setAttribute("NewsList", NewsList);
            request.getRequestDispatcher("index.jsp").forward(request, response);
        } 
        catch (SQLException e) {
            throw new ServletException("Cannot obtain news from DB", e);
        }
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
}

This is the code of index.jsp file:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>System</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="css/main_slider.css" type="text/css" media="screen" charset="utf-8" /> 

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>

<link href="css/demo.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollbox.js"></script>

<script language="javascript" type="text/javascript">
function clearText(field)
{
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}
</script>

</head>
<body id="home">

In this application my target is showing news updates on index.jsp page. so i am fetching data and showing it on jsp. To achieve this first controller runs and it fetch data from Database using DAO class. Then DAO Class returns that data into list to controller and controller then put data into requestdispatcher and send it to jsp. Now when I am running application i get data on browser but it shows just plane text data not showing css effects. while when i set index.jsp as welcome page and from it when i type url pattern then it shows fine currently my url-pattern is set to /. so how can i do — user3018803, Nov 21 '13 at 22:11
Related: [Adding external resources (CSS/JavaScript/images etc) in JSP](http://stackoverflow.com/a/14571407/814702) — informatik01, Nov 21 '13 at 22:47

score 1 · Answer 1 · answered Jan 28 '19 at 00:14

1

Make sure you have no Servlet with the url-mapping "/*". That was the problem that was causing me a lot of headaches.

answered Jan 28 '19 at 00:14

Slimani Mohammed

21
2

score 0 · Answer 2 · answered Nov 21 '13 at 18:33

0

try this..

<link href=${pageContext.request.contextPath}/css/style.css  rel="stylesheet" type="text/css" />

it's work for me..

answered Nov 21 '13 at 18:33

subash

3,116
3
18
22

Actually when I am putting above line then it shows red line below ${pageContext.request.contextPath} and I am getting same output without css – user3018803 Nov 21 '13 at 18:44

score 0 · Answer 3 · answered Nov 21 '13 at 21:26

0

It is possible that your context path i.e. ${pageContext.request.contextPath} would be incorrect. Try printing this value on the jsp and see if it is correct.

Once you correct this, you should be able to have the css, js files properly loaded.

answered Nov 21 '13 at 21:26

Uresh K

1,136
11
16

I printed its value it shows /MVCTest i.e. the name of my application but when i am writing like href="@{pageContext.request.contextPath}/css/style.css" its not working... – user3018803 Nov 21 '13 at 21:33
try declaring tag, ` ` and then your stylesheet reference as `` Check if this helps. – Uresh K Nov 21 '13 at 21:44
I tried it but not works. I just posted more code so please look it once and suggest me. – user3018803 Nov 21 '13 at 22:17

score 0 · Accepted Answer · answered Nov 22 '13 at 05:45

When you are running application then controller calls the .jsp and jsp is get converted to servlet during translation phase so try to add relative path using ${pageContext.request.contextPath} and once check the url pattern in web.xml and once left it blank and then try it may work.

score 0 · Answer 5 · answered Jan 27 '19 at 21:07

0

Try to use the JSTL add this to your JSP page
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
and then use the url taglib like this

<link href="<c:url value='/static/vendor/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet">

answered Jan 27 '19 at 21:07

Slimani Mohammed

21
2

Can't access CSS and JavaScript files in JSP

5 Answers5

Linked