ajax 更新期间组件值丢失

Question

我使用 PrimeFaces 3.3.1 和 JSF 2.0，使用的服务器是 Oracle Weblogic 11gR1

下面是我的代码。

<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>  

支持 bean 代码：

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  
}  

默认情况下，选择的单选按钮是“Single”。当用户单击“联合”单选按钮时，会显示“secondAccountHolderId”面板网格。

当我在“firstAccountHolderId”或“secondAccountHolderId”面板网格中输入任何值并更改单选按钮时，输入的值会丢失。

Answer 1

这里，

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

您基本上是在告诉 JSF 只提交（处理）当前字段（因此不是表单的所有其他字段！）然后重新渲染（更新）整个 表单（因此包括所有其他未提交/处理的字段！）。

因此，所有其他字段只是重新显示来自 bean 的初始值，而不是已输入但未提交的值。

您需要相应地更改update="@form"，使其仅根据单选按钮的更改更新真正需要更新的组件。例如

<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>

另见：

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