unable to use resources like css/js in spring mvc

Question

CSS and JS are not being render in my application-

This is my Dispatcher.xml-

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

    <context:annotation-config />
    <context:component-scan base-package="com.ttnd.springdemo.controller" />
    <mvc:resources location="/resources/" mapping="/resources/**" />
    <mvc:annotation-driven />
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
            <value>/WEB-INF/views/</value>
        </property>
        <property name="suffix">
            <value>.jsp</value>
        </property>
    </bean>
</beans>

and below is the page in which i am using css/js-

I tried this by various way,some of them are-

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/application.css">
<script src="js/application.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>

or-

<link rel="stylesheet" type="text/css" href="<spring:url value='resources/css/application.css' />" />
<script src="<spring:url value='resources/js/application.js' />"></script>
<script src="<spring:url value='resources/js/jquery.min.js' />"></script>

Answer 1

I had a similar problem with my css and the way in which I fixed it was....

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

If you want to test it to see if your css is being read, you can try to access the css file through your browser, by using the following url or something similar to http://localhost:8080/spring/resources/css/main.css. This should show your css file in your browser

Answer 2

I also had a similar problem. Fixed it by:-

1. Putting the resources inside webapp/resources directory.
2. Commenting <mvc:resources location="/resources/" mapping="/resources/**" />.

Hope it works for you as well.

EDIT

I include my JS/CSS Like

<link href="resources/css/global.css">
<script type="text/javascript" src="resources/js/myscript.js"></script>

Answer 3

I included the static files using

for css

<spring:url value="/resources/css/bootstrap.min.css" var="bootstrapCss" />
<link href="${bootstrapCss}" rel="stylesheet" />

for js

<spring:url value="/resources/js/jquery-1.11.1.min.js" var="jqueryJs" />
<script src="${jqueryJs}"></script>

and include following tags in the jsp

<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

hope it helps