Components value lost during ajax update

Question

I am using PrimeFaces 3.3.1 and JSF 2.0 and server used is Oracle Weblogic 11gR1

Below is my code.

<p:panel id="personDetailsPanelId" header="#{msg.personDetails}">  

            <!-- Radio Button -->  
            <h:panelGrid columns="3" style="align:center">  
                <h:outputText value="#{msg.accountCategory}" />  
                <p:spacer width="10px" />  
                <p:selectOneRadio id="singleJointAccountRadioId"  
                    layout="horizontal"  
                    value="#{captureAccountDetailBackingBean.accountCategory}">  
                    <f:selectItems  
                        value="#{captureAccountDetailBackingBean.accountcategoryList}">  
                    </f:selectItems>  
                    <p:ajax process="@this" event="change" update="@form"  
                        partialSubmit="true" />  
                </p:selectOneRadio>  
            </h:panelGrid>  

            <p:spacer height="30px;" />  

            <h:panelGrid id="accountDetailsId" columns="3">  
                <h:panelGrid id="firstAccountHolderId" columns="2"  
                    styleClass="float-left ">  
                    <p:graphicImage  
                        value="/com/cas/pages/common/images/person_icon.jpg" />  
                    <h:outputText value="#{msg.firstAccountHolder}" />  

                    <!-- Person Name -->  
                    <h:panelGrid columns="2">  
                        <h:outputText value="#{msg.nameofPerson}" />  
                        <span style="color: red;">*</span>  
                    </h:panelGrid>  
                    <p:inputText  
                        value="#{captureAccountDetailBackingBean.accountHolder1.personName}"  
                        size="25" required="true" />  

                    <!-- Person Address -->  
                    <h:panelGrid columns="2">  
                        <h:outputText value="#{msg.address}" />  
                        <span style="color: red;">*</span>  
                    </h:panelGrid>  
                    <p:inputTextarea  
                        value="#{captureAccountDetailBackingBean.accountHolder1.personAddress}"  
                        rows="3" autoResize="false" required="true" />  

                    <!-- DOB -->  
                    <h:panelGrid columns="2">  
                        <h:outputText value="#{msg.dateOfBirth}" />  
                        <span style="color: red;">*</span>  
                    </h:panelGrid>  
                    <p:calendar  
                        value="#{captureAccountDetailBackingBean.accountHolder1.personDOB}"  
                        navigator="true" showOn="button" size="6" required="true"  
                        pattern="dd/MM/yyyy" />  

                    <!-- Age -->  
                    <h:panelGrid columns="2">  
                        <h:outputText value="#{msg.age}" />  
                        <span style="color: red;">*</span>  
                    </h:panelGrid>  
                    <p:inputText  
                        value="#{captureAccountDetailBackingBean.accountHolder1.personAge}"  
                        size="2" required="true" />  

                </h:panelGrid>  

                <p:spacer width="130px;" />  

                <h:panelGrid id="secondAccountHolderId" columns="2"  
                    styleClass="float-left"  
                    rendered="#{captureAccountDetailBackingBean.accountCategory eq 'Joint'}">  
                    <p:graphicImage  
                        value="/com/cas/pages/common/images/person_icon.jpg" />  
                    <h:outputText value="#{msg.secondAccountHolder}" />  

                    <!-- Person Name -->  
                    <h:panelGrid columns="2">  
                        <h:outputText value="#{msg.nameofPerson}" style="font-size:15px;" />  
                        <span style="color: red;">*</span>  
                    </h:panelGrid>  
                    <p:inputText  
                        value="#{captureAccountDetailBackingBean.accountHolder2.personName}"  
                        styleClass="inputText-style" size="25" required="true" />  

                    <!-- Person Address -->  
                    <h:panelGrid columns="2">  
                        <h:outputText value="#{msg.address}" />  
                        <span style="color: red;">*</span>  
                    </h:panelGrid>  
                    <p:inputTextarea  
                        value="#{captureAccountDetailBackingBean.accountHolder2.personAddress}"  
                        rows="3" autoResize="false" styleClass="inputText-style"  
                        size="25" required="true" />  

                    <!-- DOB -->  
                    <h:panelGrid columns="2">  
                        <h:outputText value="#{msg.dateOfBirth}" />  
                        <span style="color: red;">*</span>  
                    </h:panelGrid>  
                    <p:calendar  
                        value="#{captureAccountDetailBackingBean.accountHolder2.personDOB}"  
                        navigator="true" showOn="button" size="6"  
                        styleClass="inputText-style" required="true" />  

                    <!-- Age -->  
                    <h:panelGrid columns="2">  
                        <h:outputText value="#{msg.age}" />  
                        <span style="color: red;">*</span>  
                    </h:panelGrid>  
                    <p:inputText  
                        value="#{captureAccountDetailBackingBean.accountHolder2.personAge}"  
                        size="2" styleClass="inputText-style" required="true" />  

                </h:panelGrid>  
            </h:panelGrid>  

            <div style="clear: both;" />  
</p:panel>  

Backing bean code:

public class CaptureAccountDetailBackingBean {  

    // For Radio Button  
SelectItem[] accountcategoryList = {new SelectItem("Single", "Single"), new SelectItem("Joint","Joint")};  

String accountCategory;  

    AccountHolderDetailVO accountHolder1 = new AccountHolderDetailVO();  

AccountHolderDetailVO accountHolder2 = new AccountHolderDetailVO();  

    // setter and getters  
}

AccountHolderDetailVO

public class AccountHolderDetailVO {  

    String personName;  
    String personAge;  
    Date personDOB;   
    String personAddress;  

    // getter and setter  
}  

By default, radio button selected is "Single". And "secondAccountHolderId" panelgrid is displayed when user click on "Joint" radio button.

When I enter any values in the "firstAccountHolderId" or "secondAccountHolderId" panelgrid and change the radio button, the entered values are lost.

Answer 1

Here,

<p:ajax process="@this" event="change" update="@form" partialSubmit="true" />  

you're basically telling JSF to submit (process) only the current field (and thus not all other fields of the form!) and then to re-render (update) the entire form (and thus including all other fields which were not been submitted/processed!).

So, all other fields are simply redisplaying the initial values from the bean instead of the values which were been entered but not submitted.

You need to change update="@form" accordingly that it only updates the components which really needs to be updated based on the change of the radio button. E.g.

<p:ajax process="@this" event="change" update="secondAccountHolder" partialSubmit="true" />  
...
<h:panelGroup id="secondAccountHolder">
    <h:panelGrid id="secondAccountHolderId" columns="2"  
                styleClass="float-left"  
                rendered="#{captureAccountDetailBackingBean.accountCategory eq 'Joint'}">  
        ...
    </h:panelGrid>
</h:panelGroup>

See also:

• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?