仅在验证未失败时对 f：ajax "success"事件执行脚本

我创建了一个复合组件，它扩展了命令按钮并添加了一些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>

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

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

标准 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>

相关内容

最新更新

热门标签：