I have a simple form containing an edit box and a button:
<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>
When the user clicks on the button, some basic check is performed, and if everything is in order, the element is added to the data table:
<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>
Now what I want to achieve is when the user enters the item, the first, preliminary check is performed, and if the check is successful, the item is added to the table where the list is displayed together with the check status (for example, validating, invalid, valid). When an item is added to the table, another, more time-consuming, validation is launched, and when the check is completed, the itemValidationStatus element in the table is updated. I do not want to block the user during a lengthy check. Instead, I want to allow the user to add additional elements while already added elements are checked.
I see three ways to solve this problem:
To register some kind of observer JS that will respond to the object is updated in a managed bean
To start rendering from a managed bean, which will make it possible to spawn a validation flow, which, when completed, start rendering
There are several ways to run a check through JS asynchronously and register a callback function that either triggers a render or updates the value directly
The problem is that I cannot find anything on the Internet that would point me in the right direction. I am trying to solve this with a simple JSF (without Prime Faces or similar tools).
EDIT:
I was asked another question as a possible duplicate (JSF, periodically update the component using ajax?). I'm not looking for a survey solution privately, but for updating when the underlying data changes. And this will only change, so an event listener or similar will be the obvious solution. Of course, this can also be allowed by periodic polls, but it seems like a very low level for what I get after.