Question

当我输入有效值（仅限数字）到 inputText 并单击 commandButton 然后我被重定向到 response.xhtml
当我输入无效值时，单击页面背景，然后触发更改事件，显示消息。现在，当我输入有效值并单击commandButton时，消息隐藏，但我没有重定向。当我第二次点击时，我被重定向。

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

response.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;
    }
}

Answer 1

您的具体问题是由隐藏消息引起的，这反过来导致命令按钮在其自己的点击事件结束之前向上移动，因此当鼠标按钮被释放并且即将触发时，它不再位于鼠标指针下方表格提交。如果将消息组件移动到命令按钮组件下面，则

<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"也很奇怪，但我只是保留了它在，对于你实际上想要在一些转换步骤后重新显示更改的值的情况）

Answer 2

您可能需要在index.xhtml

中执行此操作

<h:form>
    <h:panelGrid>
       <h:inputText  id="value" value="#{bean.value}">
           <f:validateRegex pattern="\d+" />
       </h:inputText>
       <h:message id="valueMessage" for="value"/>
    </h:panelGrid>
    <h:commandButton value="OK"  action="response" >
          <f:ajax  execute="value" render="value valueMessage"/>
    </h:commandButton>
</h:form>

和btw在您的代码中第一次单击是针对change事件而不是按钮，所以如果您尝试单击页面中除按钮之外的任何位置，它将使验证消失，按钮将重定向您第一次打。

首先点击commandButton不会重定向到另一个页面

2 个答案: