我有一个包含编辑框和按钮的简单表单:
<h:form id="addForm">
<h:outputLabel value="Add item here" /><br />
<p><h:inputText id="itemInput" value="#{myController.itemToAdd}" validator="myValidator" />
<h:message for="itemInput" /></p>
<h:commandButton value="Add" action="#{myController.addItemToList}">
<f:ajax execute="@form" render="@form :addedItems" />
</h:commandButton>
</h:form>
当用户单击按钮时,将完成一些基本验证,如果一切正常,则将该项目添加到数据表中:
<h:panelGrid id="addedItems">
<h:dataTable value="#{myController.itemMap.entrySet()}" var="itemMapEntry" >
<h:column>
<f:facet name="header">
<h:outputText value="Items" />
</f:facet>
<h:commandButton value="Remove/Modify" action="#{myController.removeItemFromList(itemMapEntry.getKey())}">
<f:ajax render=":addedItems :addForm" />
</h:commandButton>
<h:outputText value="#{itemMapEntry.getKey()}" />
</h:column>
<h:column>
<f:facet name="action">
<h:outputText value="" />
</f:facet>
<h:outputText value="#{itemMapEntry.getValue().toString()}" id="itemValidationStatus" />
</h:column>
</h:dataTable>
</h:panelGrid>
现在,我要实现的是用户输入项目时,首先进行初步验证,如果验证成功,则将项目添加到表中,列表与验证状态(例如,验证,无效)一起显示。 , 有效的)。将项目添加到表中时,另一个耗时的验证开始,并且验证完成后,表中的itemValidationStatus也会更新。我不想在耗时的验证期间阻止用户。相反,我想允许用户在验证已添加的项目的同时添加更多的项目。
我看到三种解决方法:
要注册将对对象做出反应的某种JS观察器,正在托管Bean中进行更新
要从托管Bean触发渲染,这将可能产生验证线程,该线程将在完成后触发渲染
有一些方法可以通过JS异步启动验证并注册一个回调函数,该函数将触发呈现或直接更新值
问题是我找不到任何可以指引我正确方向的在线信息。我正在尝试使用普通的JSF(没有Prime Faces或类似工具)解决此问题。
编辑:
有人向我提出了另一个可能重复的问题(JSF,使用ajax定期刷新组件吗?)。我不是在寻找一种定期轮询的解决方案,而是在基础数据发生更改时进行更新。而且它只会更改一次,因此显而易见的解决方案将是事件侦听器或类似事件。当然,这也可以通过定期民意测验来解决,但是对于我所追求的而言,这似乎是一个很低的水平。
现在,我通过以下更改解决了它(受此JQuery相关问题的启发,即如何从jQuery触发JSF渲染):
我onevent="validateItemList"
在<f:ajax>
表单的标签中添加了:
<h:form id="addForm">
<h:outputLabel value="Add item here" /><br />
<p><h:inputText id="itemInput" value="#{myController.itemToAdd}" validator="myValidator" />
<h:message for="itemInput" /></p>
<h:commandButton value="Add" action="#{myController.addItemToList}">
<f:ajax execute="@form" onevent="validateItemList" render="@form :addedItems" />
</h:commandButton>
</h:form>
我添加了带有隐藏按钮的隐藏表单,该表单触发了耗时的验证并重新呈现了该表:
<h:form id="hiddenForm">
<h:commandButton value="" action="#{myController.validateItemMap}" id="validatorButton" style="display:none">
<f:ajax execute="@form" render=":addedItems" />
</h:commandButton>
</h:form>
我添加了一个回调JS函数,用于“按下”隐藏的按钮:
<script type="text/javascript">
function validateItemList(data){
if(data.status == "success"){
document.getElementById("hiddenForm:validatorButton").click();
}
}
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句