JQuery 加载的 JSF 页面不会更新父页面（Primefaces）

Question

我目前正在使用 JSF2.0 制作 Facelets 页面，并使用 Primefaces 使其看起来很漂亮：D。但我有一个似乎无法解决的问题。我的页面背后的想法如下：我有一个仪表板页面，其中包含不同的手风琴选项卡，每个选项卡中都有一个 primefaces 数据表。该数据表中有给定用户的一些行。但是当我想向数据表添加新行时，我使用以下方法。我的数据表下方有一个“添加行”按钮，当我单击它时，我会通过 JQuery 将页面加载到按钮下方的 div 中。在该 div 中，我的“addrow”页面加载了验证等。

但这是问题：当我单击包含的页面上的添加按钮时，我想更新“父”页面中的数据表，因此包含我的添加页面的页面，并且这不能作为更新属性我的 p:commandButton 似乎在我的父页面上找不到数据表或任何其他组件。

那么，如果有人可以告诉我如何更新父页面中的组件呢？

这是相关的代码片段： 父页面（包括“内容 div”中的添加页面）

            <f:view contentType="text/html" beforePhase="#{userBean.retrievePersonalInformation}">
            <h:outputText value="#{companyBean.companyName}" id="test2"/>
            <h:form id="form" prependId="false">
                <p:accordionPanel autoHeight="true" effect="bounceslide" id="accordion">
                    <p:tab title="Personal information">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText
                                    value="Welkom #{loginBean.username}"/><br/>
                            <h:outputText value="#{bundle.name}"/>
                            <h:outputText value="#{userBean.lastName}"/>
                            <h:outputText value="#{userBean.street}"/>
                            <h:outputText value="#{userBean.zipCode}"/>
                            <h:outputText value="#{userBean.city}"/>
                            <h:outputText value="#{userBean.cellPhone}"/>
                            <h:outputText value="#{userBean.phone}"/>
                            <h:outputText value="#{userBean.email}"/>
                            <h:outputText value="#{userBean.dateOfBirth}"/>
                            <h:outputText value="#{userBean.gender}"/>
                            <h:outputText value="training: #{userBean.trainingName}"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="My studies">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="My studies"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="My job history">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="My Job history"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="My Technologies">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="My Technologies"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="My language skills">
                        <h:panelGrid columns="2" cellpadding="10">

                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="My Certificates">
                        <h:panelGrid columns="2" cellpadding="10">
                            <input type="button" id="btnCertificate" value="show me"/>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="My Trainings">
                        <h:panelGrid columns="2" cellpadding="10">
                            <p:dataTable var="training" value="#{trainingBean.trainingsByUser}" id="trainingTable"
                                         emptyMessage="No trainings found with given criteria" paginator="true"
                                         rows="10"
                                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                         rowsPerPageTemplate="5,10,15">

                                <p:column headerText="Training name" sortBy="#{training.name}"
                                          filterBy="#{training.name}" filterMatchMode="contains"
                                          style="width: 100px;">
                                    <h:outputText value="#{training.name}"/>
                                </p:column>

                                <p:column headerText="Training date" sortBy="#{training.trainingDate}"
                                          filterBy="#{training.trainingDate}" filterMatchMode="contains"
                                          style="width: 100px;">
                                    <h:outputText value="#{training.trainingDate}"/>
                                </p:column>
                                <p:column headerText="Training description" sortBy="#{training.description}"
                                          filterBy="#{training.description}" filterMatchMode="contains"
                                          style="width: 100px;">
                                    <h:outputText value="#{training.description}"/>
                                </p:column>
                            </p:dataTable>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="My Companies">
                        <p:dataTable value="#{companyBean.companiesByUser}" var="company" id="companyTable"
                                     emptyMessage="No companies found for given user" paginator="true" rows="10"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                     rowsPerPageTemplate="5,10,15">

                            <p:column headerText="name" sortBy="#{company.companyName}"
                                      filterBy="#{company.companyName}"
                                      filterMatchMode="contains"
                                      style="width: 100px;">
                                <h:outputText value="#{company.companyName}"/>
                            </p:column>
                            <p:column headerText="Start date" sortBy="#{company.startDate}"
                                      filterBy="#{company.startDate}"
                                      filterMatchMode="contains"
                                      style="width: 100px;">
                                <h:outputText value="#{company.startDate}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
                                </h:outputText>
                            </p:column>
                            <p:column headerText="End date" sortBy="#{company.endDate}"
                                      filterBy="#{company.endDate}"
                                      filterMatchMode="contains"
                                      style="width: 100px;">
                                <h:outputText value="#{company.endDate}">
                                    <f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
                                </h:outputText>
                            </p:column>
                            <p:column>
                                <p:commandButton id="btnEditCompany" value="Edit company" action="#{companyBean.navigateUser}" oncomplete="showCertificateEdit()">
                                    <f:setPropertyActionListener value="#{company}" target="#{companyBean.selectedCompany}"/>
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>
                        <input type="button" id="btnAddCompany" value="Add company"/>
                    </p:tab>
                </p:accordionPanel>
            </h:form>

            <div id="content">

            </div>
        </f:view>

添加页面

            <f:view contentType="text/html">
            <ui:composition>
                <h:form id="companyForm" prependId="false">
                    <h:message for="name"/>
                    <h:message for="startdate"/>
                    <h:message for="enddate"/>

                    <h:outputText class="label" value="name: "/>
                    <h:inputText id="name" styleClass="inputtext validate[required]"
                                 value="#{companyBean.companyName}"/>
                    <h:outputText class="label" value="start date: "/>
                    <h:inputText id="startdate" styleClass="inputtext validate[required]"
                                 value="#{companyBean.startDate}">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </h:inputText>
                    <h:outputText class="label" value="end date: "/>
                    <h:inputText id="enddate" styleClass="inputtext validate[required]"
                                 value="#{companyBean.endDate}">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </h:inputText>

                    <h:outputText class="label" value="type: "/>
                    <h:selectOneMenu styleClass="input" value="#{companyBean.type}">
                        <f:selectItem itemValue="0" itemLabel="Internal"/>
                        <f:selectItem itemValue="1" itemLabel="External"/>
                    </h:selectOneMenu>

                    <h:commandButton action="cancel" value="cancel" immediate="true"/>
                    <p:commandButton id="btnAddCompanyTest" actionListener="#{companyBean.addCompany}" value="Add company" ajax="false"/>

                </h:form>
            </ui:composition>
        </f:view>

JQuery 加载方法

jQuery("#btnAddCompany").click(function() {
    jQuery("#content").load('/user/companyDetail.xhtml',function(){
        jQuery("#companyForm").validationEngine('attach', {promptPosition : "topRight", scroll: false});
    });
});

支持 bean 添加方法< /strong>

public String addCompany() {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        try {
            companyService.addCompany(companyName, startDate, endDate, type);
            loadCompanyList();
        } catch (cvApplicationException e) {
            facesContext.addMessage("companyForm", new FacesMessage(e.getMessage()));
        }
        return "../user/dashboard.xhtml?faces-redirect=true";
    }

我的 backingBean 是会话范围的。

提前致谢

Answer 1

标题

相反，您正在使用 jQuery(..).load() 加载
为什么不在 div 元素内部使用。

        <div id="content">
            <p:outputPanel id="" rendered="#{companyBean.insertMode}">
                <!--  put your add page here -->
            </p:outputPanel>
        </div>

您只需设置 isInsertMode() 方法即可返回 true 或 false。
所以您将处于同一视图页面。从添加页面更新数据表可能有效。

在这种情况下，请

 <!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">

  <f:view contentType="text/html">
    <h:head>

    </h:head>
    <h:body>
     <h:form id="form">


            <p:accordionPanel autoHeight="true" effect="bounceslide" id="accordion">
                <p:tab title="My Companies">
                    <p:dataTable value="#{companyBean.list}" var="company" id="companyTable">

                        <p:column headerText="name" 
                                  style="width: 100px;">
                            <h:outputText value="#{company.name}"/>
                        </p:column>
                        <p:column headerText="Start date" 
                                  style="width: 100px;">
                            <h:outputText value="#{company.startDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
                            </h:outputText>
                        </p:column>
                        <p:column headerText="End date" 
                                  style="width: 100px;">
                            <h:outputText value="#{company.endDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
                            </h:outputText>
                        </p:column>
                    </p:dataTable>

                    <p:commandButton id="btnAddCompany" value="Add company" update=":form:add_panel" action="#{companyBean.prepareAdd}" ajax="false"/>

                </p:tab>
            </p:accordionPanel>



         <div id="content">
            <p:outputPanel id="add_panel" rendered="#{companyBean.insertMode}">
                <!--  put your add page here -->
                <h:message for="name"/>
                <h:message for="startdate"/>
                <h:message for="enddate"/>

                <h:outputText class="label" value="name: "/>
                <h:inputText id="name" styleClass="inputtext validate[required]"
                             value="#{companyBean.company.name}"/>
                <h:outputText class="label" value="start date: "/>
                <h:inputText id="startdate" styleClass="inputtext validate[required]"
                             value="#{companyBean.company.startDate}">
                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                </h:inputText>
                <h:outputText class="label" value="end date: "/>
                <h:inputText id="enddate" styleClass="inputtext validate[required]"
                             value="#{companyBean.company.endDate}">
                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                </h:inputText>

                <h:outputText class="label" value="type: "/>
                <h:selectOneMenu styleClass="input" value="#{companyBean.company.type}">
                    <f:selectItem itemValue="0" itemLabel="Internal"/>
                    <f:selectItem itemValue="1" itemLabel="External"/>
                </h:selectOneMenu>

                <h:commandButton action="cancel" value="cancel" immediate="true"/>
                <p:commandButton id="btnAddCompanyTest" actionListener="#{companyBean.addCompany}" value="Add company"
                   ajax="false"/>
            </p:outputPanel>
        </div>


        </h:form>


        </h:body>
    </f:view>

同时查看支持 bean

public class CompanyBean {

private Company company;
private boolean insertMode;

private List<Company> list;


private TestController(){
    list = new ArrayList<Company>();

            //populate data, should be from database 

    list.add(new Company("A", new Date(), new Date(), "1"));
    list.add(new Company("B", new Date(), new Date(), "0"));
    list.add(new Company("C", new Date(), new Date(), "1"));
    insertMode = false;

}

public String prepareAdd(){
    company = new Company();
    setInsertMode(true);
    return "";
}

public String addCompany() {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    try {
        //companyService.addCompany(companyName, startDate, endDate, type);
        //loadCompanyList();
        list.add(company); //change to add to database
            //load company list here

        setInsertMode(false);
    } catch (Exception e) {
        facesContext.addMessage("companyForm", new FacesMessage(e.getMessage()));
    }
    return "";
   }

/**
 * @return the list
 */
public List<Company> getList() {
    return list;
}

/**
 * @return the company
 */
public Company getCompany() {
    return company;
}

/**
 * @param company the company to set
 */
public void setCompany(Company company) {
    this.company = company;
}

/**
 * @return the insertMode
 */
public boolean isInsertMode() {
    return insertMode;
}

/**
 * @param insertMode the insertMode to set
 */
public void setInsertMode(boolean insertMode) {
    this.insertMode = insertMode;
}

}