JSF命令按钮中的Javascript事件不起作用
我正在研究JSF1.x 在JavaServerFacesinAction中所述的示例上 命令按钮上调用的javascript无效。onmouseover/out事件都是 不执行这些方法 我的项目结构如下:JSF命令按钮中的Javascript事件不起作用,javascript,java,jsf,dom-events,jsf-1.2,Javascript,Java,Jsf,Dom Events,Jsf 1.2,我正在研究JSF1.x 在JavaServerFacesinAction中所述的示例上 命令按钮上调用的javascript无效。onmouseover/out事件都是 不执行这些方法 我的项目结构如下: <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <f:view&g
<%@ 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>
<?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>
<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>
在本例中,我没有使用任何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>
<?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>
<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>
调试结果:
<%@ 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>
<?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>
<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>
表达式在运行时进行求值(但未看到提交图像),从而消除了前面的问题。
因此,我删除了EL语句,并将它们替换为不附加项目名称的相对路径 我发现了错误所在 我的javascript代码是错误的
<script type="text/javascript">
function set_image(button, image){
button.src = img;
}
</script>
功能集_图像(按钮、图像){
button.src=img;
}
我将img更改为图像:
<script type="text/javascript">
function set_image(button, image){
button.src = image;
}
</script>
功能集_图像(按钮、图像){
button.src=图像;
}
然后,活动开始顺利进行。
但第二张图像“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');"
/>
这解决了我所有的问题
谢谢大家的评论和建议。
你的建议奏效了。你不觉得你在使用一些较新的JSF版本吗?检查生成的HTML以获得JSF页面。然后用普通的HTML/JS进行测试。一旦成功,只需在JSF代码中进行更改。顺便说一句,不需要显示所有不相关的代码、pom.xml、项目结构、部署文件和所有类型的信息,这些都无助于分析真正的问题原因。如果javascript在项目中不起作用,您肯定会首先从浏览器的开发人员控制台获得提示。我从那里开始。你的问题也太吵了。请尝试将其精简为代码。