当我在 inputText 中输入有效值(仅限数字)并单击 commandButton 时，我将被重定向到 response.xhtml .
当我输入无效值时，点击页面背景，然后触发更改事件，显示消息。 现在，当我输入有效值并单击命令按钮时，消息会隐藏，但我不会被重定向。 当我第二次点击时，我被重定向。
index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid>
<h:inputText id="value" value="#{bean.value}">
<f:validateRegex pattern="\d+"/>
<f:ajax event="change" execute="@this" render="@this valueMessage"/>
</h:inputText>
<h:message id="valueMessage" for="value"/>
</h:panelGrid>
<h:commandButton value="OK" action="response"/>
</h:form>
</h:body>
</html>
响应.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Value is <h:outputText value="#{bean.value}"/>
</h:body>
</html>
Bean.java
package app;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Bean {
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
最佳答案
您的具体问题是由隐藏消息引起的，这反过来会导致命令按钮在其自己的单击事件完成之前向上移动，因此当释放鼠标按钮并即将触发命令按钮时，不再位于鼠标指针下方表单提交。如果像这样将消息组件移动到命令按钮组件下方，
<h:commandButton value="OK" action="response"/>
<h:message id="valueMessage" for="value"/>
...那么当消息隐藏时，命令按钮将停留在 UI 中的同一位置，从而成功接收其单击事件并触发表单提交。
这只是一个 UI 设计问题，而不是技术问题。您需要尝试确保按钮在其单击事件完成之前不会移开。
一种方法是使表单为 2 列宽，以便消息显示在输入字段旁边而不是下方，从而不会占用更多水平空间:
<h:panelGrid columns="2">
另一种方法是使用 <f:ajax delay> 延迟 ajax 请求属性(仅自 JSF 2.2 起可用)。我测试了几个值，100~200ms 似乎可以接受平均点击的时间跨度(从按下鼠标按钮到实际释放鼠标按钮的时间)。这样，单击提交按钮时实际上不会触发 ajax 请求，从而避免按钮的移动(以及“不必要的”验证)。
<f:ajax render="@this valueMessage" delay="150" />
(请注意， event="change" 和 execute="@this" 已经是默认值，为了清楚起见，在上面的示例中已经省略了它们；从技术上讲 render="@this" 也很奇怪，但我只是保留了它，以防万一您实际上想在某些转换步骤后重新显示更改后的值)
关于ajax - 第一次单击命令按钮不会重定向到另一个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28583760/