Spring MVC import css and js in jsp page

Question

I caught an issue when I add a css file into jsp file, I have searched and try the tut in the following link but it not work for me...http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/

My project have been created by spring tool suite. Here are my file structure and the files

-\src
-----\main
--------\webapp
-----------\resources
--------------\css
-----------------\jquery-ui.css
--------------\js
-----------------\jquery-1.10.2.js

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/root-context.xml</param-value>
    </context-param>

    <!-- Creates the Spring Container shared by all Servlets and Filters -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!-- Processes application requests -->
    <servlet>
        <servlet-name>appServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

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

</web-app>

servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

    <!-- DispatcherServlet Context: defines this servlet's request-processing 
        infrastructure -->

    <!-- Enables the Spring MVC @Controller programming model -->
    <annotation-driven />

    <resources mapping="/resources/**" location="/resources/" />

    <!-- Resolves views selected for rendering by @Controllers to .jsp resources 
        in the /WEB-INF/views directory -->
    <beans:bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>

    <context:component-scan base-package="vn.edu.tdt.controller" />



</beans:beans>

abc.jsp page

<!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=UTF-8">

<link rel="stylesheet" type="text/css" href="resources/css/jquery-ui.css">

<script src="resources/js/jquery-1.10.2.js"></script>

I know that my problem have asked in stackoverflow.com by many people and I have read those and try it but it's not working, so a straight answer is very helpful :D

UPDATE question : I've got this message in my browser :

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/tdt/resources/css/jquery-ui.css".

Rajeev Agile · Accepted Answer · 2015-09-28 10:13:14Z

1

I had faced similar issue, I tried to implement the spring part from the below page and it worked,

http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/

The mvc:resources mapping is the key concept.

Regards

answered Sep 28, 2015 at 10:13

Rajeev Agile

461 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

XXLUser · Accepted Answer · 2014-12-26 09:59:20Z

0

Include resources in your context like this:

<resources location="/css/" mapping="/css/**"/>
<resources location="/js/" mapping="/js/**" />

And link in jsp page:

<link href="<c:url value="/css/jquery-ui.css"/>" rel="stylesheet" type="text/css" />
<script src="<c:url value="/js/lib/jquery/jquery-1.10.2.js"/>"></script>

answered Dec 26, 2014 at 9:59

XXLUser

1731 gold badge1 silver badge9 bronze badges

Comments

Selva · Accepted Answer · 2014-12-26 10:37:22Z

0

Configure the image,css and js folder like below

<mvc:resources mapping="/img/**" location="WEB-INF/img/" />
    <mvc:resources mapping="/css/**" location="WEB-INF/css/" />
    <mvc:resources mapping="/js/**" location="WEB-INF/js/" />

answered Dec 26, 2014 at 10:37

Selva

1,6605 gold badges36 silver badges67 bronze badges

1 Comment

Nessaj Nguyen Over a year ago

thank for your suggestion but it's not accordant with my file structure.

Master Slave · Accepted Answer · 2014-12-26 11:39:05Z

0

You should map your static resource path like this

<resources mapping="/resources/**" location="/resources/" />

and switch from relative to root referencing in the path

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/jquery-ui.css">

also and add an order attribute to you resource mapping. Something like

<resources mapping="/resources/**" location="/resources/" order="0" />

move your scan statement to be the first in xml, so, something like

<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">


    <context:component-scan base-package="vn.edu.tdt.controller" />

    <!-- Enables the Spring MVC @Controller programming model -->
    <annotation-driven />

    ...

the reason for the suggested change is that static mapping have the lowest precedence by default, and setting it to 0, actually makes it higher, and you're not getting an error message saying that it can't be mapped, rather that you're not getting a CSS resources. This means that probably some request mapping is taking over a request (which you should see in the logs)

edited Dec 26, 2014 at 11:39

answered Dec 26, 2014 at 9:20

Master Slave

28.6k4 gold badges61 silver badges56 bronze badges

7 Comments

Nessaj Nguyen Over a year ago

Master Slave : I have try your advice and it not work either. My browser display a message : " Resource interpreted as Stylesheet but transferred with MIME type text/html: "localhost:8080/tdt/book/resources/css/jquery-ui.css". "

Master Slave Over a year ago

I've made a slight edit and fixed a typo, with your edited questio nthe only thing that can cause issues is that you're using a relative path in your JSPs.

Nessaj Nguyen Over a year ago

yes, I have read and try the tut in mkyong.com/spring-mvc/…

Master Slave Over a year ago

can you reach your css by any of the url in the updated question?

Nessaj Nguyen Over a year ago

Master Slave : No, I can reach my css file by those URLs.

|

RockSolid · Accepted Answer · 2015-04-11 17:22:36Z

0

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/lib/jquery/jquery-1.10.2.js"></script>

I used the mvc:resouces and other stuff as mentioned in above responses. Still faced the issue finally removed the '/' and that worked for me..

answered Apr 11, 2015 at 17:22

RockSolid

5341 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Spring MVC import css and js in jsp page

5 Answers 5

Comments

Comments

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related