在f:ajax“成功"屏幕上执行脚本仅在验证未失败时发生的事件 [英] Execute a script on f:ajax "success" event only when validation has not failed
问题描述
我创建了一个扩展命令按钮并添加一些ajax函数(onBegin，onComplete和onSuccess)的复合组件，但是我有一些无法解决的问题:
I have created a composite component that extends the command button and add some ajax functions (onBegin, onComplete and onSuccess), but I have some problems that I couldnt solve:
当我单击按钮并发生验证错误时，成功事件函数将通过{{facesContext.validationFailed} = false而不是true传递，即使您认为该表单已再次呈现； (html是在成功事件发生之前渲染的，对吗?)
When I click on the button and a validation error occur, in success event function is passed #{facesContext.validationFailed} = false instead of true even thought the form is render again; (html is render before a success event called, right?)
<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文件
Javascript File
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代码生成器.
EL expressions are evaluated while generating HTML output. They are not evaluated during JavaScript events or so. Rightclick and View Source. You see, it's one and all HTML/JS. No JSF components, no EL expressions. JSF is "just" a HTML code generator.
因此，当您加载页面时，#{facesContext.validationFailed}将打印false. 正是这个值作为JS函数参数传递.仅当在传递#{facesContext.validationFailed}作为JSF函数参数之前重新渲染负责打印#{facesContext.validationFailed}的JSF组件时，该功能才起作用.
So when you load the page, #{facesContext.validationFailed} will print false. Exactly this value is being passed as JS function argument. It will only work if you re-render the JSF component responsible for printing #{facesContext.validationFailed} before passing it as JS function argument.
标准JSF不提供将附加信息传递给ajax响应的功能. PrimeFaces和OmniFaces等组件库通过自定义PartialViewContext支持此功能. PrimeFaces在其args对象中甚至具有内置的validationFailed属性，该属性可在任何oncomplete属性中使用.
Standard JSF offers no facilities to pass additional information to the ajax response. Component libraries like PrimeFaces and OmniFaces support this via a custom PartialViewContext. PrimeFaces has even a builtin validationFailed property in its args object which is available in any oncomplete attribute.
您最好的选择是有条件地渲染onsuccess脚本本身.
Your best bet is to conditionally render onsuccess script itself.
<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“成功"屏幕上执行脚本仅在验证未失败时发生的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
