Question

我想实现以下用例 -

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

选项卡中的

表单提交一些值并保留在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>

Answer 1

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

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

引用primefaces文档：

当标签内容由ajax toggleMode延迟加载时，仅缓存检索选项卡内容一次和后续切换缓存选项卡不与服务器通信。如果关闭缓存，请选项卡每次单击选项卡时，都会从服务器重新加载内容。

Answer 2

正如Kukeltje在评论中已经建议的那样，将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; }
}

每次单击选项卡时，JSF-Prime表面都会更新pickList

2 个答案: