JSF : How to refresh required field in ajax request

Posted by Tama on Stack Overflow See other posts from Stack Overflow or by Tama
Published on 2011-01-11T14:50:18Z Indexed on 2011/01/11 14:53 UTC
Read the original article Hit count: 284

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about AJAX

Related posts about jsf