JQuery loaded JSF page doesn't update parent page (Primefaces) - jsf

Question

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

Answer 1

Heading
instead you are loading using jQuery(..).load()
why don't you using inside the div element.
<div id="content">
<p:outputPanel id="" rendered="#{companyBean.insertMode}">
<!-- put your add page here -->
</p:outputPanel>
</div>
You can just set isInsertMode() method to return either true or false.
So you will be in the same view page. Updating the datatable from your add page may work.
In this case please review this one
<!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>
also the Backing 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;
}
}