I am currently making a Facelets page with JSF2.0 and I am using Primefaces to make it look fancy :D. But I have a problem which I can't seem to solve. The idea behind my page is the following : I have a dashboard page which contains different accordion tabs and in each tab there is a primefaces datatable. In that datatable are some rows for a given user. But when I want to add a new row to my datatable I use the following method. I have a button "Add row" beneath my datatable and when I click it I load through JQuery a page into a div that's beneath my button. In that div is then my "addrow" page loaded with the validation and so on.
But here is the problem: when I click on my add button on the included page, I want to update my datatable in the "parent" page, so the page that includes my add page, and this is not working as the update attribute for my p:commandButton doesn't seem to find the datatable or any other component on my parent page.
So if someone could tell me how that I could update my component in my parent page ?
Here is the related code fragments : Parent page (which includes the add page in the "content 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>
The add page
<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 load method
jQuery("#btnAddCompany").click(function() {
jQuery("#content").load('/user/companyDetail.xhtml',function(){
jQuery("#companyForm").validationEngine('attach', {promptPosition : "topRight", scroll: false});
});
});
Backing bean add method
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";
}
My backingBean is sessionscoped.
Thanks in advance
