Fatal编程技术网
  • ajax/
  • Ajax 首先单击commandButton'；不要重定向到另一页

Ajax 首先单击commandButton'；不要重定向到另一页

ajax jsf

Ajax 首先单击commandButton'；不要重定向到另一页,ajax,jsf,jsf-2.2,Ajax,Jsf,Jsf 2.2,当我向inputText输入有效值（仅数字）并单击commandButton时，我将被重定向到response.xhtml 当我输入无效值时，单击页面背景，然后触发更改事件，显示消息。 现在，当我输入有效值并单击commandButton时，消息隐藏，但我没有被重定向。 当我第二次单击时，我被重定向 index.xhtml <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

当我向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>
    您可能必须在
    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>

    

    

    

    顺便说一句，在您的代码中，第一次单击是针对
    change
    事件，而不是按钮，因此，如果您尝试单击页面中除按钮以外的任何位置，它将使验证消失，并且按钮将从第一次点击中重定向您。
    您的具体问题是由隐藏消息引起的，这反过来会导致命令按钮在其自身的单击事件完成之前向上移动，从而在释放鼠标按钮并即将触发表单提交时不再位于鼠标指针下方。如果像这样将消息组件移动到命令按钮组件下方
    

    <h:commandButton value="OK" action="response"/>
<h:message id="valueMessage" for="value"/>

    

    

    
。。。然后，当消息隐藏时，命令按钮将停留在UI中的相同位置，因此其单击事件将被成功接收并触发表单提交
    
这只是一个UI设计问题，而不是技术问题。您需要尝试确保按钮在其单击事件完成之前不会移动
    
一种方法是使表单2列宽，以便消息显示在输入字段旁边而不是下方，从而不占用更多的水平空间：
    

    <h:panelGrid columns="2">

    

    

    
另一种方法是使用属性延迟ajax请求（仅在JSF2.2之后可用）。我用几个值进行了测试，100~200ms似乎可以覆盖平均点击的时间跨度（从按下鼠标按钮到实际释放鼠标按钮的时间）。这样，当单击submit按钮时，实际上不会触发ajax请求，从而避免了按钮的移动（以及“不必要的”验证）
    

    

    

    （请注意，
    event=“change”
    和
    execute=“@this”
    已经是默认值，为了清晰起见，在上面的示例中已经省略了它们；从技术上讲，
    render=“@this”
    也很奇怪，但我只是保留了它，以防您在经过一些转换步骤后确实想要重新显示更改的值）
    "... 当鼠标按钮被释放并即将触发表单提交时，鼠标指针不再存在”，这是否意味着表单提交仅在鼠标按钮被释放时发生，并且鼠标指针应位于单击和释放之间的按钮上？我的意思是，例如，如果（在上下文中）我点击一个命令按钮，然后将鼠标放在它的外侧，表单将不会被提交？@Tarik：这取决于是否已经在被拖动的按钮和您放置它的区域上实现了拖放。但是默认情况下，表单确实不会被提交。感谢您的澄清（以及回答）

    <h:commandButton value="OK" action="response"/>
<h:message id="valueMessage" for="value"/>

    

    <h:panelGrid columns="2">

    

    <f:ajax render="@this valueMessage" delay="150" />