Running script files and use of Css files with Spring MVC?

Question

I'm developing a Spring MVC application and i have my login page (login.jsp) that should call scripts and link some css files . The problem is the applications doesn't run scripts .

here is my files ;

Web.xml

  <servlet-mapping>
  <servlet-name>default</servlet-name>
  <url-pattern>*.css</url-pattern>
 </servlet-mapping>

 <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/ressources/js/*</url-pattern>
 </servlet-mapping>

My mvc dispatcher spring file :

    <mvc:resources mapping="/resources/**" location="/ressources/" /> 
    <mvc:resources mapping="/scripts/**" location="/ressources/js/" /> 

   <bean      class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
     <bean
    class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
     </bean>
        <bean
          class="org.springframework.web.servlet.view.InternalResourceViewResolver">
          <property name="prefix">
            <value>/WEB-INF/pages/</value>
          </property>
          <property name="suffix">
            <value>.jsp</value>
          </property>
        </bean>
    </beans>

Login.jsp calling the script files and css files

<% String init="<c:url value='/resources/js/init.js'>";%>
<% String grid="<c:url value='/resources/css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarOverlaid=1&viewport_is1000px=1060'>";%>
<% String query="<c:url value='/resources/js/jquery-1.8.3.min.js'>";%>
<% String drop="<c:url value='/resources/js/jquery.dropotron-1.2.js'>";%>

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,300italic" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="<%=grid%>"></script>
<script src="<%=drop%>"></script>
<script src="<%=init%>"></script>
<noscript>
    <link rel="stylesheet" href="<c:url value='/resources/css/5grid/core.css' />"/>
    <link rel="stylesheet" href="<c:url value='/resources/css/5grid/core-desktop.css' />"/>
    <link rel="stylesheet" href="<c:url value='/resources/css/5grid/core-1200px.css' />"/>
    <link rel="stylesheet" href="<c:url value='/resources/css/5grid/core-noscript.css' />"/>
    <link rel="stylesheet" href="<c:url value='/resources/css/style.css' />"/>
    <link rel="stylesheet" href="<c:url value='/resources/css/style-desktop.css' />"/>
</noscript>

When displaying the page there are no styles used only components displayed as there are no scripts and no css file .

Any one please have a solution to my problem ?? Thank You

Answer 1

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>Spring MVC Application</display-name>
  <servlet>
    <servlet-name>mvc-dispatcher</servlet-name>
    <servlet-class>
                    org.springframework.web.servlet.DispatcherServlet
                </servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>mvc-dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
  <listener>
    <listener-class>
                  org.springframework.web.context.ContextLoaderListener
                </listener-class>
  </listener>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>
            /WEB-INF/mvc-dispatcher-servlet.xml,
            /WEB-INF/spring-security.xml
        </param-value>
  </context-param>
  <filter>
    <filter-name>springSecurityFilterChain</filter-name>
    <filter-class>
                  org.springframework.web.filter.DelegatingFilterProxy
                </filter-class>
  </filter>
  <filter-mapping>
    <filter-name>springSecurityFilterChain</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>
</web-app>

Answer 2

In your resource mappings you have misspelled resources. It does not have contain two s characters.

  <mvc:resources mapping="/resources/**" location="/resources/" /> 
  <mvc:resources mapping="/scripts/**" location="/resources/js/" />

as opposed to:

  <mvc:resources mapping="/resources/**" location="/ressources/" /> 
  <mvc:resources mapping="/scripts/**" location="/ressources/js/" />

Notice that when you load your css and scripts they are under the resource directory as opposed to ressources

<link rel="stylesheet" href="<c:url value='/resources/css/style-desktop.css' />"/> 

<% String drop="<c:url value='/resources/js/jquery.dropotron-1.2.js'>";%>

The dispatcher servlet will attempt to handle this request instead of letting them pass through.

Also change the dispatcher servlet mapping in your web.xml file.

  <servlet-mapping>
    <servlet-name>mvc-dispatcher</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>

Mapping to / will cause the dispatcher to handle all requests, while mapping to /* will cause the dispatcher to handle all requests that are not mapped to a resource.