每次单击选项卡时 JSF-Primefaces pickList 都会更新答案

【问题标题】：JSF-Primefaces pickList update on every click of the tab每次单击选项卡时 JSF-Primefaces pickList 都会更新
【发布时间】：2015-06-22 04:57:10
【问题描述】：

我想实现以下用例-

<p:tabView id="top-level-tab">
            <p:tab title="TabA" id="tab-A">
                <ui:include src="tabA.xhtml" />             
            </p:tab>
            <p:tab title="TabB" id="tab-B">
                <ui:include  src="tabB.xhtml" />
            </p:tab>
</p:tabView>

tab-A 中的表单提交一些值并保留在 DB 中。当 tab-B 被点击时，最近保存的值应该显示在 tab-B 的 PickList 中。 JSF 构造视图树并在服务器端进行缓存，这导致 tab-B 的 PickList 没有更新。寻求经验丰富的 JSF-Primefaces 开发人员的帮助，因为我是 JSF-Primefaces 的新手。

tabB.xhtml

<h:form id="tabBForm">

<p:pickList id="tabBPickList" value="#{tabBController.countries}"  var="countries" itemLabel="#{countries}" itemValue="#{countries}" required="true"/>

<p:commandButton value="Submit" update="tabBForm"/>

</h:form>

【问题讨论】：

为什么不在其他标签中明确更新具体的组件？

标签： jsf primefaces

【解决方案1】：

尝试将tabView的缓存属性设置为false。

<p:tabView id="top-level-tab" cache="false">

引自 primefaces 文档：

当 ajax toggleMode 懒加载 tab 内容时，只缓存检索选项卡内容一次并随后切换缓存选项卡不与服务器通信。如果缓存已关闭，请选项卡每次单击选项卡时都会从服务器重新加载内容。

【讨论】：

【解决方案2】：

正如 Kukeltje 在 cmets 中所建议的那样，将 update="..." 属性添加到表单 A（保留在数据库中的那个）中的 <p:commandButton ...> 应该可以解决问题。

我在下面的代码中检查了它，它可以工作：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <p:tabView id="tabView">
            <p:tab title="TabA" id="tab-A">
                <h:form id="tabAForm">
                    <p:outputLabel for="country" value="Enter country name" />
                    <p:inputText id="country" value="#{tabAController.countryName}" />
                    <p:commandButton value="Save" action="#{tabAController.saveCountry}" update="tabView:tabBForm:tabBPickList" />
                </h:form>
            </p:tab>
            <p:tab title="TabB" id="tab-B">
                <h:form id="tabBForm">
                    <p:pickList id="tabBPickList" value="#{tabBController.countries}"  var="countries" itemLabel="#{countries}" itemValue="#{countries}" />
                    <p:commandButton value="Submit" />
                </h:form>
            </p:tab>
    </p:tabView>
    </h:body>
</html>

支持 bean nr 1：

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named (value = "tabAController")
@RequestScoped
public class TabAController {

    private String countryName;

    public String saveCountry() {
        CountryDAO dao = new CountryDAO();
        Country country = new Country();
        country.setCountryName(countryName);
        dao.saveCountry(country);
        return "";
    }

    public void setCountryName(String countryName) { this.countryName = countryName; }
    public String getCountryName() { return countryName; }
}

支持 bean nr 2：

import java.util.ArrayList;
import java.util.List;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
import org.primefaces.model.DualListModel;

@Named
@RequestScoped
public class TabBController {

    private DualListModel<String> countries;

    public TabBController() {
        CountryDAO dao = new CountryDAO();
        List countriesObj = dao.getCountries();
        List<String> countriesSource = new ArrayList();
        for(Object country : countriesObj) {
            Country tmp = (Country) country;
            countriesSource.add(tmp.getCountryName());
        }
        List<String> countriesTarget = new ArrayList();
        countries = new DualListModel(countriesSource, countriesTarget);
    }

    public void setCountries(DualListModel<String> countries) { this.countries = countries; }
    public DualListModel<String> getCountries() { return countries; }
}

【讨论】：