javascriptcssspringjspspring-mvc

CSS and JavaScript problems with Spring

I found some problems when referencing to CSS and JS.

This is my JSP

<html lang="es-MX">
<head>
    <title>Cambio Musical</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- This are the css and the js that fail -->
    <link href="reset.css" rel=stylesheet>
    <link href="menuSuperior.css" rel=stylesheet>   
    <link href="style.css"  rel=stylesheet> 
    <link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet'>
    <link rel="stylesheet"  href="estilo.css" />
     <!-- The main CSS file -->
    <link href="reloj.css" rel="stylesheet" />
    <link rel="shortcut icon" href="logo.ico">
    <!--[if lt IE 9]>
            <script src="assets/js/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scriptboton.js"></script>
    <!-- This are the css and the js that fail -->
</head>
<body>
    <div id="contenedor">
        <!---Comienza la cabecera-->
        <div id="cabecera">
            <div id="logo"><img src="logo.png" width=100px height=60px>
                <div id='cssmenu'>
                    <ul>
                        <li class='has-sub'><a href='index'><span>Inicio</span></a></li>
                        <li class='has-sub'><a href='getParList'><span>Participantes</span></a>
                            <ul>
                                <li class='has-sub'><a href='participants'><span>Agregar Participante</span></a></li>
                                <li class='has-sub'><a href='getParList'><span>Mostrar Participantes</span></a></li>
                            </ul>
                        </li>
                        <li class='has-sub'><a href='devent'><span>Eventos</span></a>
                            <ul>
                                <li class='has-sub'><a href='event'><span>Agregar Evento</span></a></li>
                                <li class='has-sub'><a href='devent'><span>Mostrar Eventos</span></a></li>
                            </ul>
                        </li>
                        <li class='has-sub'><a href='searchmusic'><span>Música</span></a>
                            <ul>
                                <li class='has-sub'><a href='music'><span>Agregar Música</span></a></li>
                                <li class='has-sub'><a href='searchmusic'><span>Mostrar Música</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub"><a href="/result"><span>Resultados</span></a>
                            <ul>
                                <li class='has-sub'><a href='result'><span>Resultados Generales</span></a></li>
                                <li class='has-sub'><a href='sexRes'><span>Resultados Por Sexo</span></a></li>
                                <li class='has-sub'><a href='ageRes'><span>Resultados Por Edad</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

This is my dispatcher servlet:

<!-- declaring base package -->
<context:component-scan base-package="cambio.packs" />

<!-- adding view resolver to show jsp's on browser -->
    <bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping"/>
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
<bean id="viewResolver"
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/" />
    <property name="suffix" value=".jsp" />
</bean>

And this is what the reference shows

<html>

<head>
  <title>Apache Tomcat/7.0.22 - Informe de Error</title>
  <style>
    <!--H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}HR {color : #525D76;}
    -->
  </style>
</head>

<body>
  <h1>Estado HTTP 404 - </h1>
  <HR size="1" noshade="noshade">
  <p><b>type</b> Informe de estado</p>
  <p><b>mensaje</b> <u></u></p>
  <p><b>descripción</b> <u>El recurso requerido () no está disponible.</u></p>
  <HR size="1" noshade="noshade">
  <h3>Apache Tomcat/7.0.22</h3>
</body>

</html>

This is my XML conf

<display-name>ElCambio</display-name>
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
    <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>        
<servlet><servlet-name>spring</servlet-name>
<servlet-class> org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>2</load-on-startup>
</servlet>
    
<servlet-mapping>
    <servlet-name>spring</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>
<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
Solution

  • try adding a <mvc:resources/> tag to inform spring about the location of your static resources (css, javascripts, images ...)

    http://docs.spring.io/spring/docs/3.0.x/reference/mvc.html

    <mvc:resources mapping="/resources/**" location="/public-resources/"/>