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

问题描述 投票：0回答：1

我正在开发JSF 1.x在JavaServer Faces in Action中陈述的示例中。

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

我的项目结构如下：

“结构”

在此示例中，我没有使用任何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>

应用程序成功运行。但是“提交图像”按钮未显示，该按钮是通过运行时表达式检索的。

浏览器显示：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9WMVRhMC5qcGcifQ==” alt =“在此处输入图像描述”>

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

调试结果：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS85Y3NpMS5qcGcifQ==” alt =“调试结果”>

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

javascript java jsf dom-events jsf-1.2
1个回答
0
投票

我发现了错误所在。

我的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');" 
                            />

这解决了我所有的问题。

感谢大家的评论和建议。您的建议有效。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.