JSF 在进行 ajax 更新时重置字段

Question

我的 JSF 页面出现问题，我在第一个计费名字字段中输入了一个名字。如果我点击复制账单地址复选框；这将停止呈现送货地址面板并通过 ajax 将其隐藏，我刚刚在第一个字段中键入的值将重置为之前的状态。

JSF 页面

<h:form>
    <p:inputText value="#{addressBean.billingAddress.firstName}" required="true"/ >

    <p:selectBooleanCheckbox value="#{addressBean.copyBillingAddress}" id="duplicateBillingDetails">
        <f:ajax render="@form" />
    </p:selectBooleanCheckbox>

    <h:panelGrid rendered="#{not addressBean.copyBillingAddress}" columns="3">
        <p:inputText value="#{addressBean.deliveryAddress.firstName}"/>
    </h:panelGrid>

    <p:commandButton value="Checkout" action="#{addressBean.saveAddress}"/>
</h:form>

支持豆

@Component
@Scope("view")
public class AddressBean implements Serializable {
    @Inject
    private CurrentUserBean currentUserBean;
    @Inject
    private UserService userService;
    private Address deliveryAddress = new Address();
    private Address billingAddress = new Address();
    private boolean copyBillingAddress;


    public AddressBean() {

    }

    public boolean isCopyBillingAddress() {
        return copyBillingAddress;
    }

    public void setCopyBillingAddress(boolean copyBillingAddress) {
        this.copyBillingAddress = copyBillingAddress;
    }


    public String saveAddress() {
        if (copyBillingAddress) {
            deliveryAddress = new Address(billingAddress);
        }

        User user = currentUserBean.getUser();
        if (!billingAddress.isSame(user.getBillingAddress())) {
            user.setBillingAddress(billingAddress);
        }
        if (!deliveryAddress.isSame(user.getDeliveryAddress())) {
            user.setDeliveryAddress(deliveryAddress);
        }
        currentUserBean.setUser(userService.save(user));
        return "/checkout.xhtml";
    }

    public CurrentUserBean getCurrentUserBean() {
        return currentUserBean;
    }


    public void setCurrentUserBean(CurrentUserBean currentUserBean) {
        this.currentUserBean = currentUserBean;
    }

    public Address getDeliveryAddress() {
        return deliveryAddress;
    }

    public void setDeliveryAddress(Address deliveryAddress) {
        this.deliveryAddress = deliveryAddress;
    }

    public Address getBillingAddress() {
        return billingAddress;
    }

    public void setBillingAddress(Address billingAddress) {
        this.billingAddress = billingAddress;
    }




}

Answer 1

<f:ajax> 默认只处理当前组件，如execute="@this"。因此所有其他输入组件的提交值将不会被处理，因此不会更新到模型中。但是，您通过render="@form" 强制使用所有其他输入组件的当前（未更新！）模型值刷新表单的整个 HTML 输出。

假设您的意图是不不必要地转换/验证/更新所有其他输入组件，您最好使render 属性更具体。只更新真正需要更新的内容，而不是整个表单。

<p:selectBooleanCheckbox value="#{addressBean.copyBillingAddress}" id="duplicateBillingDetails">
    <f:ajax render="copyBillingAddress" />
</p:selectBooleanCheckbox>

<h:panelGroup id="copyBillingAddress">
    <h:panelGrid rendered="#{not addressBean.copyBillingAddress}" columns="3">
        <p:inputText value="#{addressBean.deliveryAddress.firstName}"/>
    </h:panelGrid>
</h:panelGroup>

或者，如果你真的需要render="@form"，那么你需要添加一个execute="@form"，以便告诉<f:ajax>也处理所有其他输入组件。

<f:ajax execute="@form" render="@form" />

请注意，这可能会不必要地触发这些输入组件的转换/验证。

另见：

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