JavaScript事件在JSF命令按钮中不起作用

我正在JSF 1.x上工作关于JavaServer Faces in Action中所述的示例。JavaScript事件在JSF命令按钮中不起作用

在命令按钮上调用的JavaScript不起作用。两个onmouseover/out事件都是不执行这些方法。

我的项目结构如下：

Structure

我没有使用任何Java代码在这个例子中，它只包含一个登录页面。

的的login.jsp如下：

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> 
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> 


<f:view> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css" /> 

    <script type="text/javascript"> 
     function set_image(button, image){ 
      button.src = img; 
     } 
    </script> 

    <title><h:outputText value="ProjectTrack" /></title> 
</head> 

<body> 

    <h:form> 
     <h:panelGrid columns="2" border="0" cellpadding="3" cellspacing="3"> 

      <h:graphicImage url="/images/logo.png" 
        alt="Welcome to ProjectTrack" title="Welcome to ProjectTrack" 
        width="149" height="160" /> 


      <h:panelGrid columns="3" border="0" cellpadding="5" cellspacing="3" headerClass="login-heading"> 

       <f:facet name="header"> 
        <h:outputText value="ProjectTrack" /> 
       </f:facet> 

       <h:outputLabel for="userNameInput" > 
        <h:outputText value="Enter your user name: " /> 
       </h:outputLabel> 

       <h:inputText id="userNameInput" size="20" maxlength="30" required="true"> 
        <f:validateLength minimum="5" maximum="30"/> 
       </h:inputText> 

       <h:message for="userNameInput" /> 

       <h:outputLabel for="passwordInput"> 
        <h:outputText value="Password"/> 
       </h:outputLabel> 

       <h:inputSecret id="passwordInput" size="20" maxlength="20" required="true"> 
        <f:validateLength minimum="5" maximum="15" /> 
       </h:inputSecret> 

       <h:message for="passwordInput" /> 

       <h:panelGroup> 
        <h:commandButton action="success" 
           image="/images/submit.gif" 
           onmouseover="set_image(this, '/images/submit_over.gif'); alert('button: ' + this);" 
           onmouseout="set_image(this, '/images/submit.gif'); alert('button: ' + this); " 
          /> 
       </h:panelGroup> 

      </h:panelGrid> 

     </h:panelGrid> 

     <h:outputText value=" Debug test for EL exp : #{facesContext.externalContext.requestContextPath}/images/submit.gif" /> 
    </h:form> 
</body> 
</f:view> 
    </html>

我的web.xml部署描述符如下：

<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"> 

    <display-name>Project Track</display-name> 
    <description>Sample Project</description> 

    <servlet> 
     <servlet-name>Faces Servlet</servlet-name> 
     <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> 
     <load-on-startup>1</load-on-startup> 
    </servlet> 

    <servlet-mapping> 
     <servlet-name>Faces Servlet</servlet-name> 
     <url-pattern>/faces/*</url-pattern> 
    </servlet-mapping> 

    <welcome-file-list> 
     <welcome-file>faces/login.jsp</welcome-file> 
    </welcome-file-list> 


</web-app>

faces-config.xml中如下：

<?xml version="1.0"?> 
<!DOCTYPE faces-config PUBLIC 
    "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN" 
    "http://java.sun.com/dtd/web-facesconfig_1_0.dtd"> 

<faces-config> 

    <application> 
     <message-bundle>ptrackResources</message-bundle> 
    </application> 

    <navigation-rule> 
     <from-view-id>/login.jsp</from-view-id> 
     <navigation-case> 
      <from-outcome>success</from-outcome> 
      <to-view-id>/inbox.jsp</to-view-id> 
     </navigation-case> 
     <navigation-case> 
      <from-outcome>failure</from-outcome> 
      <to-view-id>/login.jsp</to-view-id> 
     </navigation-case> 
    </navigation-rule> 

</faces-config>

个

我的Maven依赖关系如下：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 
    <modelVersion>4.0.0</modelVersion> 
    <groupId>com.achutha.labs</groupId> 
    <artifactId>03JsfExample</artifactId> 
    <version>0.0.1-SNAPSHOT</version> 
    <packaging>war</packaging> 
    <name>03JsfExample</name> 
    <description>Project Track</description> 

    <dependencies> 

     <dependency> 
      <groupId>javax.faces</groupId> 
      <artifactId>jsf-api</artifactId> 
      <version>1.2_14</version> 
     </dependency> 
     <dependency> 
      <groupId>javax.faces</groupId> 
      <artifactId>jsf-impl</artifactId> 
      <version>1.2_14</version> 
     </dependency> 

     <dependency> 
      <groupId>javax.servlet</groupId> 
      <artifactId>jstl</artifactId> 
      <version>1.2</version> 
     </dependency> 

     <dependency> 
      <groupId>javax.servlet</groupId> 
      <artifactId>servlet-api</artifactId> 
      <version>2.5</version> 
     </dependency> 

     <dependency> 
      <groupId>javax.servlet.jsp</groupId> 
      <artifactId>jsp-api</artifactId> 
      <version>2.1</version> 
     </dependency> 

     <!-- EL --> 
     <dependency> 
      <groupId>org.glassfish.web</groupId> 
      <artifactId>el-impl</artifactId> 
      <version>2.2</version> 
     </dependency> 

    </dependencies> 


    <build> 
     <finalName>JavaServerFaces</finalName> 

     <plugins> 

      <plugin> 
       <groupId>org.codehaus.mojo</groupId> 
       <artifactId>tomcat-maven-plugin</artifactId> 
       <configuration> 
        <url>http://localhost:8090/manager/text</url> 
        <server>TomcatServer</server> 
        <path>/balaji</path> 
       </configuration> 
      </plugin> 

      <plugin> 
       <groupId>org.apache.maven.plugins</groupId> 
       <artifactId>maven-compiler-plugin</artifactId> 
       <version>2.3.1</version> 
       <configuration> 
        <source>1.6</source> 
        <target>1.6</target> 
       </configuration> 
      </plugin> 
     </plugins> 
    </build> 



</project>

的应用成功运行。但“提交图像”按钮不显示通过运行时表达式检索的图像。

浏览器显示：

enter image description here

的JavaScript不是调用声明的事件。

<h:commandButton action="success" 
            image="/images/submit.gif" 
            onmouseover="set_image(this, '/images/submit_over.gif'); alert('button: ' + this);" 
            onmouseout="set_image(this, '/images/submit.gif'); alert('button: ' + this); " 
           />

我必须使用JSF 1.x和无法升级到JSF 2. 请给我建议的解决方案，并帮助我知道了什么错误。

以前：

如问题#{facesContext} EL expression not resolved at runtime 说我是使用命令按钮下面的语句。

<h:commandButton action="success" 
           image="#{facesContext.externalContext.requestContextPath}/images/submit.gif" 
           onmouseover="set_image(this, '#{facesContext.externalContext.requestContextPath}/images/submit_over.gif');" 
           onmouseout="set_image(this, '#{facesContext.externalContext.requestContextPath}/images/submit.gif');" 
          />

我只是在login.jsp加一个Debug声明主要内容如下：

<h:outputText value=" Debug test for EL exp : #{facesContext.externalContext.requestContextPath}/images/submit.gif" />

调试结果：

Debug Result

的表达得到在运行时进行评估，（但提交的图像没有看到），消除了以前的问题。因此，我删除了EL语句，并将它们替换为没有附加项目名称的相对路径。

来源

2013-02-21 bali208

难道你不是在使用一些较新的JSF版本吗？ – partlov 2013-02-21 15:10:18

检查为您的JSF页面生成的HTML。然后，只需在纯HTML/JS中进行测试即可。一旦运行，只需在JSF代码中进行更改即可。顺便说一下，不需要显示所有不相关的代码，pom.xml，项目结构，部署文件以及所有类型的信息都无助于分析真正的问题原因。 – 2013-02-21 15:14:29

如果javascript在某个项目中不起作用，那么您肯定会首先从浏览器的开发者控制台获取线索。我会从那里开始。你的问题也有太多的噪音。请尝试将其修剪为仅限代码。 – kolossus 2013-02-21 17:12:14

我想出了错误是什么。

我的javascript代码有误。

<script type="text/javascript"> 
     function set_image(button, image){ 
      button.src = img; 
     } 
    </script>

我改变了IMG图像：

<script type="text/javascript"> 
     function set_image(button, image){ 
      button.src = image; 
     } 
    </script>

然后开始事件工作的罚款。但是第二张图片'submit_over.gif'没有检索显示。

我接着又说了EL表达式的事件：

<h:commandButton action="success" 
           image="/images/submit.gif" 
           onmouseover="set_image(this, '#{facesContext.externalContext.requestContextPath}/images/submit_over.gif');" 
           onmouseout="set_image(this, '#{facesContext.externalContext.requestContextPath}/images/submit.gif');" 
          />

这解决了我的所有问题。

感谢大家的意见和建议。你的建议工作。

来源

2013-02-22 01:53:30 bali208

JavaScript事件在JSF命令按钮中不起作用

回答

相关问题