2012-04-26 2 views
3

Я загрузил шаблон входа, который использует css и JavaScript. Когда я запускаю его в формате html по умолчанию, он отображается нормально, но когда я помещаю тот же код в приложение Spring MVC 3 и меняю формат на jsp, часть javascript отключается. Я могу получить доступ к внешним файлам js через свой веб-браузер, поэтому я не знаю, где может быть проблема.JavaScript с Spring MVC не работает

Это правильный взгляд: right

, но это то, что я получаю: wrong

<script language="javascript" type="text/javascript" src="js/niceforms.js"></script> 
<link rel="stylesheet" type="text/css" media="all" href="css/niceforms-default.css" /> 

Я только изменил расположение внешних JS и CSS ресурсов, но эти файлы, доступные как я сказал.

Это моя структура:

enter image description here

В моей web.xml я эти строки:

<!-- 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, 
     /WEB-INF/spring/security-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> 

<!-- Spring Security --> 
<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-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.css</url-pattern> 
</servlet-mapping> 
<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.js</url-pattern> 
</servlet-mapping> 
<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.gif</url-pattern> 
</servlet-mapping> 
<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.jpg</url-pattern> 
</servlet-mapping> 
<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.png</url-pattern> 
</servlet-mapping> 
<servlet-mapping> 
    <servlet-name>default</servlet-name> 
    <url-pattern>*.txt</url-pattern> 
</servlet-mapping> 

Я также использовать Apache tiles2

<tiles-definitions> 
<definition name="base.definition" template="/WEB-INF/views/layout/layout.jsp"> 
    <put-attribute name="body" value="" /> 
</definition> 

<definition name="contact" extends="base.definition"> 
    <put-attribute name="body" value="/WEB-INF/views/contact.jsp" /> 
</definition> 

<definition name="login" template="/WEB-INF/views/login/login.jsp"> 
</definition> 

Спасибо.

Edit:

Я знаю, где проблема сейчас, но до сих пор не знает, как ее решить ... Проблема в дорожках во внешних CSS-файлах. У меня есть что-то вроде этого: body {background-image:url('images/bg.jpg');}, но я не нашел ошибку в firebug, потому что он пытается найти ресурс в localhost: 8080/sheedo/css/images/bg.jpg и когда я устанавливаю абсолютный путь ресурса, например body {background-image:url('/images/bg.jpg');} Я получаю такая же ошибка, но она пытается найти ее в localhost: 8080/images/bg.jpg. Когда я использую ./images/bg.jpg, все в порядке, но существует ли какое-либо другое решение вместо того, чтобы переписывать все пути в файлах css? Я имею в виду что-то вроде <mvc:resources ... > это возможно?

+0

Что ошибка JS вы видите? -> Firebug в FF или "inpect element" в Chrome/Safari ... – nickdos

+0

Спасибо за подсказку с firebug. Посмотрите на мое редактирование. –

ответ

8
<script type="text/javascript" src="${pageContext.request.contextPath}/js/niceforms.js"></script> 
<link href="${pageContext.request.contextPath}/css/niceforms-default.css" rel="stylesheet" /> 

Используйте код выше .. Вам нужно указать его динамически, а не статически ..

+0

Спасибо, это конечно полезно, но могу ли я использовать это в определении css? –

+0

yes - его просто ссылка на статический файл, не имеет значения, если его CSS или JS-файл. – nickdos

+0

@Toby - Да, вы можете nickdos абсолютно правильно – Raghuveer

1

Используйте абсолютный путь в ваших JSPs для яваскрипт и CSS

добавить это в JSP

<% 
    String path = request.getContextPath(); 
%> 

Изменить эти две линии

<script language="javascript" type="text/javascript" src="<%=path%>/js/niceforms.js"></script> 
<link rel="stylesheet" type="text/css" media="all" href="<%=path%>/css/niceforms-default.css" /> 
+0

К сожалению, тот же результат ... –

+1

Ughhh, это так уродливо (его 2012 не 2002), вместо этого попробуйте '$ {pageContext.request.contextPath}'. Например. '' – nickdos

+0

спасибо @nickdos .... –

1

Там две вещи, которые я вижу здесь

  1. Дефа Ультра сервлета не имеет никакого сервлет-отображения. Документация tomcat написана следующим образом: http://tomcat.apache.org/tomcat-5.5-doc/default-servlet.html (я считаю, что вы используете tomcat).
  2. Если в jsp есть проблема пути, попробуйте использовать jstl core librarie's <c:url/>, который является более чистым. http://docs.oracle.com/javaee/5/jstl/1.1/docs/tlddocs/c/tld-summary.html
0

Вместо этого уродливого ${pageContext.request.contextPath}, если вы используете это в шаблоне:

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> 

Тогда вы можете сделать это:

<spring:url value="/resources/jquery-2.1.4.js" var="jqueryJS" /> 
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') { 
    var script = document.createElement('script'); 
    script.type = "text/javascript"; 
    script.src = "${jqueryJS}"; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 
</script>