Страница JSF, загруженная JQuery, не обновляет родительскую страницу (Primefaces) - PullRequest
0 голосов
/ 05 мая 2011

В настоящее время я делаю страницу Facelets с JSF2.0 и использую Primefaces, чтобы она выглядела модно: D. Но у меня есть проблема, которую я не могу решить. Идея, лежащая в основе моей страницы, заключается в следующем: у меня есть страница панели инструментов, которая содержит различные вкладки аккордеона, и в каждой вкладке есть данные с простыми числами. В этой таблице данных есть несколько строк для данного пользователя. Но когда я хочу добавить новую строку в таблицу данных, я использую следующий метод. У меня есть кнопка «Добавить строку» под моей таблицей данных, и когда я нажимаю на нее, я загружаю через JQuery страницу в div, который находится под моей кнопкой. В этом div моя страница «addrow» загружена с проверкой и т. Д.

Но вот в чем проблема: когда я нажимаю кнопку добавления на включенной странице, я хочу обновить свои данные на «родительской» странице, поэтому страница, которая включает в себя мою страницу добавления, и это не работает как Атрибут update для моего p: commandButton, похоже, не находит таблицу данных или любой другой компонент на моей родительской странице.

Так, если бы кто-то мог сказать мне, как я мог обновить свой компонент на моей родительской странице?

Вот соответствующие фрагменты кода: Родительская страница (которая включает страницу добавления в «разделе содержимого»)

            <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});
    });
});

Метод добавления бобов

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";
    }

Мой бэкБин имеет сессионную область.

Заранее спасибо

1 Ответ

0 голосов
/ 12 мая 2011

Заголовок

Вместо этого вы загружаете, используя 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>

и компонент поддержки

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

}
...