仅当验证未失败时才在 f:ajax "success" 事件上执行脚本

Question

我创建了一个扩展命令按钮并添加一些 ajax 函数（onBegin、onComplete 和 onSuccess）的复合组件，但是我有一些我无法解决的问题：

当我点击按钮并发生验证错误时，成功事件函数被传递 #{facesContext.validationFailed} = false 而不是 true 即使表单再次呈现；（html 是在调用成功事件之前渲染的，对吧？）

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

<cc:interface shortDescription="CommandButton com Ajax">

    <cc:attribute name="onbegin"/>
    <cc:attribute name="oncomplete"/>
    <cc:attribute name="onsuccess"/>
    <cc:attribute name="render"/>
    <cc:attribute name="execute"/>
    <cc:attribute name="action" targets="commandButton"/>
    <cc:attribute name="actionListener" targets="commandButton"/>
    <cc:attribute name="value"/>
    <cc:attribute name="styleClass" targets="commandButton"/>
    <cc:attribute name="immediate" targets="commandButton"/>

</cc:interface>

<cc:implementation>

    <h:outputScript library="progutils" name="/js/commandButton.js" target="HEAD"/>

    <h:commandButton id="commandButton" value="#{cc.attrs.value}">
        <f:ajax render="#{cc.attrs.render}" execute="#{cc.attrs.execute}"
                onevent="function(data){execCommandButtonAjax(data, function(){ #{cc.attrs.onbegin} },function(){ #{cc.attrs.oncomplete} },function(){ #{cc.attrs.onsuccess} }, #{facesContext.validationFailed})}">
        </f:ajax>
    </h:commandButton>

</cc:implementation>

</html>

Javascript 文件

function execCommandButtonAjax(data, onBegin, onComplete, onSuccess, validationFailed) {
    var status = data.status;
    switch (status) {
        case 'begin': {
            onBegin();
            break;
        }
        case 'complete': {
            onComplete();
            break;
        }
        case 'success': {
            console.log('Validation Failed ' + validationFailed);
            if(!validationFailed){
                onSuccess();
            }
            break;
        }
    }
}

使用组件：

<pu2:commandButton id="btnPu2" 
                   onbegin="block(); console.log('begin')"                                                                    
                   oncomplete="unblock(); console.log('complete')"
                   onsuccess="console.log('success')"
                   execute="@form"
                   action="#{list.search()}"
                   render="@form :table-form :form-pagination"
                   value="Do it">
</pu2:commandButton>

Answer 1

EL 表达式在生成 HTML 输出时计算。在 JavaScript 左右的事件期间不会对其进行评估。右键单击并查看源代码。你看，它就是一个 HTML/JS。没有 JSF 组件，没有 EL 表达式。 JSF 是 "just" 一个 HTML 代码生成器。

因此当您加载页面时，#{facesContext.validationFailed} 将打印 false。 这个值 正作为 JS 函数参数传递。仅当您在将其作为 JS 函数参数传递之前重新呈现负责打印 #{facesContext.validationFailed} 的 JSF 组件时，它才会起作用。

标准 JSF 不提供将附加信息传递给 ajax 响应的工具。 PrimeFaces 和 OmniFaces 等组件库通过自定义 PartialViewContext 支持这一点。 PrimeFaces 在其 args 对象中甚至有一个内置的 validationFailed 属性，它在任何 oncomplete 属性中都可用。

最好的办法是有条件地呈现 onsuccess 脚本本身。

<h:commandButton id="commandButton" value="#{cc.attrs.value}">
    <f:ajax execute="#{cc.attrs.execute}" render="#{cc.attrs.render} onsuccess" 
            onevent="function(data){execCommandButtonAjax(data, function(){ #{cc.attrs.onbegin} },function(){ #{cc.attrs.oncomplete} })}">
    </f:ajax>
</h:commandButton>
<h:panelGroup id="onsuccess">
    <h:outputScript rendered="#{facesContext.postback and not facesContext.validationFailed}">
        #{cc.attrs.onsucces}
    </h:outputScript>
</h:panelGroup>

仅当验证未失败时才在 f:ajax "success" 事件上执行脚本

Execute a script on f:ajax "success" event only when validation has not failed

javascript

ajax

event-handling

composite-component

jsf-2