Search code examples
javahtmlcssjsp

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

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:

enter image description here

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>
Solution

  • 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.