JSP doesn't see CSS and JS files from resources folder

Question

I have some problem with my css and js import in my web application. I am using Servlets/JSP/CSS/JS.

I am sorry for this question, i saw many questions and answers for this theme and situation but nothing helped me.

I am trying to add css and js files like this:

<link rel="stylesheet" href="<c:url value='/resources/stylesheet/common.css' />"/>
<link rel="stylesheet" href="<c:url value='/resources/stylesheet/index.css' />"/>
<script type="text/javascript" src="resources/js/validators/loginValidator.js"></script>

But something happends and all of my css and js files doesn't work. My folders/files positions in the project:

I had tried many different ways to terminate that issue. I tried this: https://stackoverflow.com/a/23687360/5331196 and https://stackoverflow.com/a/29012643/5331196

And nothing helped me. But the only thing which is working is dinamyc import: <%@include file="/resources/stylesheet/login.css" %> e.t.c.

It helped, but, in that case, there will be a lot of code in my jsp page because my .css and .js files are huge.

What should i do to terminate that issue and how can i do that static import in this situation?

Thanks to all,who can answer, your friend, davakin111.

My web.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <display-name>Jean taxi-service</display-name>

    <listener>
        <listener-class>com.taxi.service.utils.ApplicationContext</listener-class>
    </listener>

    <filter>
        <filter-name>ClientFilter</filter-name>
        <filter-class>com.taxi.service.filter.ClientFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>ClientFilter</filter-name>
        <url-pattern>/someUrl1</url-pattern>
    </filter-mapping>

    <filter>
        <filter-name>OrderFilter</filter-name>
        <filter-class>com.taxi.service.filter.OrderFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>OrderFilter</filter-name>
        <url-pattern>/someUrl2</url-pattern>
    </filter-mapping>

    <servlet>
        <servlet-name>InitController</servlet-name>
        <servlet-class>com.taxi.service.controller.InitController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>LoginController</servlet-name>
        <servlet-class>com.taxi.service.controller.LoginController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>RegistrationController</servlet-name>
        <servlet-class>com.taxi.service.controller.RegistrationController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>UserController</servlet-name>
        <servlet-class>com.taxi.service.controller.UserController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>OrderController</servlet-name>
        <servlet-class>com.taxi.service.controller.OrderController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>PrivateAreaController</servlet-name>
        <servlet-class>com.taxi.service.controller.PrivateAreaController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>ReviewController</servlet-name>
        <servlet-class>com.taxi.service.controller.OrderController</servlet-class>
    </servlet>

    <servlet>
        <servlet-name>AdminController</servlet-name>
        <servlet-class>com.taxi.service.controller.AdminController</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>InitController</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>LoginController</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>UserController</servlet-name>
        <url-pattern>/savePersonData</url-pattern>
        <url-pattern>/changePassword</url-pattern>
        <url-pattern>/madeModerator</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>OrderController</servlet-name>
        <url-pattern>/orderCreation</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>RegistrationController</servlet-name>
        <url-pattern>/registration</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>ReviewController</servlet-name>
        <url-pattern>/review</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>PrivateAreaController</servlet-name>
        <url-pattern>/privateArea</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>AdminController</servlet-name>
        <url-pattern>/adminPanel</url-pattern>
    </servlet-mapping>

    <!-- <error-page>
        <location>/WEB-INF/pages/error.jsp</location>
    </error-page>
    -->

    <session-config>
        <session-timeout>45</session-timeout>
    </session-config>

    <resource-ref>
        <description>DB Connection</description>
        <res-ref-name>jdbc/order_board</res-ref-name>
        <res-type>javax.sql.DataSource</res-type>
        <res-auth>Container</res-auth>
    </resource-ref>

    <welcome-file-list>
        <welcome-file>/index.jsp</welcome-file>
    </welcome-file-list>

    <login-config>
        <auth-method>BASIC</auth-method>
    </login-config>

</web-app>

Drag the File and Drop on JSP page automatic it will contain correct Path of CSS and JS or else use (..) before resource . it will work — Anand Dwivedi, Sep 21 '15 at 10:05

Bhuwan Prasad Upadhyay · Accepted Answer · 2015-09-21T11:19:15.983

2

For JSP project:

Create cssLoader.jsp page inside folder webapp as below:

webapp
   -cssLoader.jsp

cssLoader.jsp

<link rel="stylesheet" href="resources/stylesheet/common.css"/>
<link rel="stylesheet" href="resources/stylesheet/index.css"/>
<script type="text/javascript" src="resources/js/validators/loginValidator.js"></script>

Then load this cssLoader page where you want to import css/js file in page using <jsp:include page="../../cssLoader.jsp"></jsp:include>. For example: in my case DIRECTORY:

WEB-INF
   -pages
      -page.jsp

page.jsp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>WEB-INF INSIDE PAGE</title>

        <jsp:include page="../../cssLoader.jsp"></jsp:include>
    </head>
    <body>
        <h1>WEB-INF INSIDE PAGE</h1>
    </body>
</html>

Note:

../../ depends upon folder level structure.

edited Sep 21 '15 at 11:19

answered Sep 21 '15 at 10:12

Bhuwan Prasad Upadhyay

2,916
1
29
33

Hi developerbhuwan, i had already tried this variants and still not working. – Alexey Shabramov Sep 21 '15 at 10:16
1

Hi @davakin111 You project is plain JSP project or Spring project – Bhuwan Prasad Upadhyay Sep 21 '15 at 10:17
My project contains JSP,Servlets, no Spring. p.s. When a were using Spring there was no such problems with the resources folder. I am very dejected by this issue. – Alexey Shabramov Sep 21 '15 at 10:21
1

Temporary solution for your problem is i think like : . Please share your web.xml for more detail beacuse your static resource not map show this problem arise. – Bhuwan Prasad Upadhyay Sep 21 '15 at 10:35
I edited my question and added my web.xml take a look.Thanks. – Alexey Shabramov Sep 21 '15 at 10:42
Thank you very much! It helped. – Alexey Shabramov Sep 21 '15 at 11:17
Theoretical question on the margin (happy, davakin has his solution) to @developerbhuwan: 1. GOOD is to wrap fragment in a kind of object, problem is wrapped too ;) 2. I feel this is a kind hiding problems instead resolving (primary problem) ? I'm wrong? I'm not active in JSP, use Wicket since long years - have such automatic css linking/wrapping from fabric. – Jacek Cz Sep 21 '15 at 11:25
I am not a professional, but must to say, that this is very strange issue... i working with jsp and never had such problems. I think you are right about hiding. And after all variants i didn't believed that @developerbhuwan solution will work, but it worked. Thank goodness.. :) – Alexey Shabramov Sep 21 '15 at 11:35

score 1 · Answer 2 · answered Sep 21 '15 at 10:08

1

change your css path into

    <link rel="stylesheet" href="<c:url value='/resources/stylesheet/slider/common.css' />"/>
    <link rel="stylesheet" href="<c:url value='/resources/stylesheet/slider/index.css' />"/>

answered Sep 21 '15 at 10:08

balaraman

397
1
7
21

First I move my `pages` folder to webapp/resources, second use your answer. Also work fo me `type="text/css" href="resources/stylesheet/slider/common.css"`. I added this links to `page.jsp`, where `page.jsp` at `pages` folder. – Mikhail Ionkin Aug 28 '18 at 16:29

Tim Biegeleisen · Answer 3 · 2015-09-21T10:52:52.200

1

I believe you can correct your problem by making two structural changes.

First, move your pages/ folder outside WEB-INF and underneath webapp/resources. So your project structure should look like this:

webapp
\__ resources
    \__ images
    \__ js
    \__ pages

Second, change the way you reference things in your web pages using this new structure. For example, the <script> tag should now look like this:

<script type="text/javascript" src="js/validators/loginValidator.js"></script>

edited Sep 21 '15 at 10:52

answered Sep 21 '15 at 10:11

Tim Biegeleisen

502,043
27
286
360

Thanks, few seconds and i will try it. Thanks for your answer. – Alexey Shabramov Sep 21 '15 at 10:15
@davakin111 Any luck with this solution? – Tim Biegeleisen Sep 21 '15 at 10:52

score 1 · Answer 4 · answered Sep 21 '15 at 10:13

1

Hope this will work. I guess you can do this by adding these lines as given below

<link rel="stylesheet" type="text/css" href="/resources/stylesheets/indx.css" />
<script type="text/javascript" src="resources/js/validators/loginValidator.js"></script>

answered Sep 21 '15 at 10:13

priyanka hj

79
1
2
11

Hi pinky. I tried this variant, but still doesn't working... that was my first way to terminate that issue, but doesn't helped :( – Alexey Shabramov Sep 21 '15 at 10:18

score 1 · Answer 5 · answered Sep 21 '15 at 10:17

1

If ccs style is static (not pre-processed by server side code), why not use normal non-JSP (HTML) notation?

<link rel="stylesheet" type="text/css" href="./styles/bla bla panel.css" />

One level of debugging less

Check css association in server / web.xml Basic "static" sample from google will be ok.

answered Sep 21 '15 at 10:17

Jacek Cz

1,872
1
15
22

Hi Jacek Cz, thanks for your answer. I have tried this variant at the begining when tried to resolve this issue myself, but in also didn't helped me. – Alexey Shabramov Sep 21 '15 at 10:23
1

Fire in browser supposed css URL(not page url - that's what static declaration is important), check server logs for errors until effect etc. people here suggest review of web.xml, is this Tomcat, Jetty or other? Must see css sheet in browser – Jacek Cz Sep 21 '15 at 10:48
I am using Tomcat in this project. – Alexey Shabramov Sep 21 '15 at 10:49
1

Look at page source in browser, css links seems ok? Can You click an move to sheet? Firefox plugin WebDeveloper (other browsers have too) has kind of debugger for bad linked css – Jacek Cz Sep 21 '15 at 10:52
Yes, when i click on this link from source from browser (when i am using my first variants for linking) i am gettind this error: HTTP Status 404 - /taxijean.com/resources/stylesheet/WEB-INF/pages/index.jsp – Alexey Shabramov Sep 21 '15 at 10:59
And ...tomcat/logs ? Message suggests hard work of 404-handler (I dont understand path so deep), but this is AFTER error. BTW too zealous handler can mask errors, in development sometimes is disabled – Jacek Cz Sep 21 '15 at 11:08
http://stackoverflow.com/a/32692598/5331196 He helped me. Thanks for your answers. – Alexey Shabramov Sep 21 '15 at 11:11

score 0 · Answer 6 · answered Apr 06 '22 at 11:19

The solution by Bhuvan will only work when a servlet uses RequestDispatcher (and not sendRedirect) to get to a JSP page.

In order to get CSS to load properly, in both cases, sendRedirect and RequestDispatcher, use absolute paths:

When linking CSS directly:

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

When using a JSP file containing all CSS references:

<jsp:include page="${request.getContextPath()}/All_CSS_files.jsp"></jsp:include>

When you write ${pageContext.request.contextPath} or ${request.getContextPath()}, it means the root folder - aka webapp folder.

After this, irrespective of using RequestDispatcher or sendRedirect, your CSS will load properly.

JSP doesn't see CSS and JS files from resources folder

6 Answers6

When linking CSS directly:

When using a JSP file containing all CSS references:

See also: