JSF : How to refresh required field in ajax request - ajax

Question

Ok, here you are the core problem.
The page. I have two required "input text".
A command button that changes the bean value and reRenderes the "job" object.
<a4j:form id="pervForm">
SURNAME:<h:inputText id="surname" label="Surname" value="#{prevManager.surname}" required="true" />
<br/>
JOB:<h:inputText value="#{prevManager.job}" id="job" maxlength="10" size="10" label="#{msg.common_label_job}" required="true" />
<br/>
<a4j:commandButton value="Set job to Programmer" ajaxSingle="true" reRender="job">
<a4j:actionparam name="jVal" value="Programmer" assignTo="#{prevManager.job}"/>
</a4j:commandButton>
<h:commandButton id="save" value="save" action="save" class="HATSBUTTON"/>
</a4j:form>
Here the simple manager:
public class PrevManager
{
private String surname;
private String job;
public String getSurname()
{
return surname;
}
public void setSurname(String surname)
{
this.surname = surname;
}
public String getJob()
{
return job;
}
public void setJob(String job)
{
this.job = job;
}
public String save()
{
//do something
}
}
Let's do this:
Write something on the Job input text (such as "teacher").
Leave empty the surname.
Save.
Validation error appears (surname is mandatory).
Press "Set job to Programmer": nothing happens.
Checking the bean value, I discovered that it is correctly updated, indeed the component on the page is not updated!
Well, according to the JBoss Docs I found:
Ajax region is a key ajax component.
It limits the part of the component
tree to be processed on the server
side when ajax request comes.
Processing means invocation during
Decode, Validation and Model Update
phase. Most common reasons to use a
region are:
-avoiding the aborting of the JSF lifecycle processing during the
validation of other form input
unnecessary for given ajax request;
-defining the different strategies when events will be delivered
(immediate="true/false")
-showing an individual indicator of an ajax status
-increasing the performance of the rendering processing
(selfRendered="true/false",
renderRegionOnly="true/false")
The following two examples show the
situation when a validation error does
not allow to process an ajax input.
Type the name. The outputText
component should reappear after you.
However, in the first case, this
activity will be aborted because of
the other field with required="true".
You will see only the error message
while the "Job" field is empty.
Here you are the example:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.outergridvalidationcolumn {
padding: 0px 30px 10px 0px;
}
</style>
<a4j:outputPanel ajaxRendered="true">
<h:messages style="color:red" />
</a4j:outputPanel>
<h:panelGrid columns="2" columnClasses="outergridvalidationcolumn">
<h:form id="form1">
<h:panelGrid columns="2">
<h:outputText value="Name" />
<h:inputText value="#{userBean.name}">
<a4j:support event="onkeyup" reRender="outname" />
</h:inputText>
<h:outputText value="Job" />
<h:inputText required="true" id="job2" value="#{userBean.job}" />
</h:panelGrid>
</h:form>
<h:form id="form2">
<h:panelGrid columns="2">
<h:outputText value="Name" />
<a4j:region>
<h:inputText value="#{userBean.name}">
<a4j:support event="onkeyup" reRender="outname" />
</h:inputText>
</a4j:region>
<h:outputText value="Job" />
<h:inputText required="true" id="job1" value="#{userBean.job}" />
</h:panelGrid>
</h:form>
</h:panelGrid>
<h:outputText id="outname" style="font-weight:bold" value="Typed Name: #{userBean.name}" />
<br />
</ui:composition>
Form1: the behaviour is incorrect. I need to fill the job and then the name.
Form2: the behaviour is correct. I do not need to fill the job to see the correct value.
Unfortunately using Ajax region does not help (indeed I used it in a bad way ...) because my fields are both REQUIRED. That's the main different.
Any idea?
Many thanks.

Answer 1

This problem is also identified in JSF 2 and explained in detail in this related answer: How can I populate a text field using PrimeFaces AJAX after validation errors occur?
Summarized, the answer is that you need to clear the state of the EditableValueHolder component when it's about to be ajax-rendered, but which isn't included in the ajax-execute, by calling the methods setValue(null), setSubmittedValue(null), setLocalValueSet(false), setValid(true). Note: in JSF 2 you would have used the convenience method resetValue() instead.
Given that your "job" input field has the client ID prevForm:job, here's how you could clear it inside the action listener method associated with the "Set job to programmer" button:
UIInput input = (UIInput) context.getViewRoot().findComponent("prevForm:job");
input.setValue(null);
input.setSubmittedValue(null);
input.setLocalValueSet(false);
input.setValid(true);

Answer 2

Using a4j:actionparam will set the value, but will not help you bypass validation in this case. Validation happens on the component (not the bean property). So, when you submit, the component value is still empty. Hope this helps.

Answer 3

When you click "Set job to Programmer" nothing happens because you are not reRendering your message component. If you do, you'll be able to see the validation message.
You need to reRender the message because its a <a4j:commandButton/>, not a simple <h:commandButton/>
Try to use the prop. immediate in "Set job to Programmer" button and check if it will update the field.
<a4j:commandButton value="Set job to Programmer" ajaxSingle="true" reRender="job" immediate="true">
<a4j:actionparam name="jVal" value="Programmer" assignTo="#{prevManager.job}"/>
</a4j:commandButton>
*I dont think "ajaxSingle" necessary here..
Maybe you can get a new problem.. using immediate, the bean value will be not updated (MAYBE!). If it happens, make a bean method which sets manually the bean value.
Otherwise, if the bean value was updated and the field still empty, try to put the "job" field into a <a4j:outputPanel/> and reRender the outputPanel.
<a4j:outputPanel id="myPanel">
<h:inputText value="#{prevManager.job}" id="job" maxlength="10" size="10" label="#{msg.common_label_job}" required="true" />
</a4j:outputPanel/>
<a4j:commandButton value="Set job to Programmer" reRender="myPanel" immediate="true">
<a4j:actionparam name="jVal" value="Programmer" assignTo="#{prevManager.job}"/>
</a4j:commandButton>
More info about <a4j:outputPanel/> here.