Primefaces Wizard and fileUpload Uncaught TypeError: this.jq.fileupload is not a function - primefaces

I tried to create a new Wizard with <p:tab>, it seems to be working fine but when I try to implement it in here to replace with the richfaces fileUpload, it keep showing error in the console like this:
I have tried it in 1st to 3rd tabs, the fileUpload seems to be working fine, but when comes to 4th to 6th tabs, it keeps showing "Uncaught TypeError: this.jq.fileupload is not a function" in console and upload is not working either in frontend or backend.
I also added enctype="multipart/form-data" in <h:form> but it doesn't have any differences
Im currently working on Primefaces 8.0.5
It does not have any error in my log, only console.
<ui:define name="content">
<h:panelGroup id="FLEXIBLE_TOPOLOGY">
<sec:authorize access="hasAnyRole('ROLE_ADMIN')">
<h:form id="projectCreateWizardFrm">
<p:wizard flowListener="#{projectCreatePage.onFlowProcess}" id="projectCreateWizard"
widgetVar="projectCreateWizardWV"
showNavBar="#{projectCreatePage.webActionPending}" showStepStatus="true"
styleClass="wizard">
<p:tab id="project" titleStyleClass="notClickable">
<f:facet name="title">
...
</f:facet>
<p:panel id="wizardProjectPnl">
<p:focus context="wizardProjectPnl" />
<div class="title2">
<h:outputText value="#{msg['system_step']} 1 - #{msg['flexitopology_wizard_project_header']}" />
</div>
<p:spacer height="10" />
<h:panelGrid id="projectCreateStartTbl" columns="2" columnClasses="form-label, form-value">
<h:panelGroup>
...
</h:panelGroup>
<h:inputText id="projectName" value="#{projectCreatePage.project.name}" size="60" maxlength="100" autocomplete="false"
disabled="#{!projectCreatePage.webActionPending or (!projectCreatePage.showEdit and projectCreatePage.showDeploy)}" />
<sec:authorize access="hasAnyRole('ROLE_ADMIN')">
<h:panelGroup rendered="#{!projectCreatePage.qcsFlag}">
<h:outputLabel value="#{msg['workspace_create_project_hostingcustomer']}" />
</h:panelGroup>
<h:panelGroup rendered="#{!projectCreatePage.qcsFlag}">
<h:selectBooleanCheckbox id="customerEnabledChkBox" value="#{projectCreatePage.customerEnabled}"
disabled="#{projectCreatePage.disabledAfterSaved}">
<f:ajax event="click" listener="#{projectCreatePage.onCustomerEnabledChange}"
render="organizationLblPnl, organizationValPnl, environmentLblPnl, environmentValPnl, standaloneQasLblPnl, standaloneQasValPnl" />
</h:selectBooleanCheckbox>
</h:panelGroup>
</sec:authorize>
<h:panelGroup id="organizationLblPnl">
...
</h:panelGroup>
<h:panelGroup id="organizationValPnl">
...
</h:panelGroup>
<h:panelGroup id="environmentLblPnl">
...
</h:panelGroup>
<h:panelGroup id="environmentValPnl">
...
</h:panelGroup>
<h:panelGroup id="organizationEnvironmentLblPnl">
...
</h:panelGroup>
<h:panelGroup id="organizationEnvironmentValPnl">
...
</h:panelGroup>
<h:panelGroup>
...
</h:panelGroup>
<h:panelGroup>
...
</h:panelGroup>
</h:panelGrid>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="license" titleStyleClass="notClickable">
<f:facet name="title">
...
</f:facet>
<p:panel id="wizardLicensePnl">
<div class="title2">
...
</div>
<p:spacer height="10" />
<h:panelGrid id="projectCreateLicenseTbl" columns="2" columnClasses="form-label, form-value">
<h:panelGroup id="contractSlaLblPnl">
...
</h:panelGroup>
<h:panelGroup id="contractSlaValPnl">
...
</h:panelGroup>
<h:panelGroup id="standaloneQasLblPnl">
...
</h:panelGroup>
<h:panelGroup id="licenseLblPnl">
...
</h:panelGroup>
<h:panelGroup id="licenseValPnl" style="border:none;padding:0;">
...
</h:panelGroup>
<h:panelGroup id="licenseLblPnl2">
...
</h:panelGroup>
<h:panelGroup id="licenseValPnl2" style="border:none;padding:0;">
...
</h:panelGroup>
</h:panelGrid>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="topology" titleStyleClass="notClickable">
<f:facet name="title">
...
</f:facet>
<p:panel id="wizardTopologyPnl">
<div class="title2">
...
</div>
<p:spacer height="10" />
<p:panel id="projectCreateTopologyPnl" style="border:0;">
<f:facet name="header">
<div class="col-left title3">
...
</div>
<div class="col-right title3">
...
</div>
</f:facet>
<h:panelGrid columns="3" styleClass="grid" columnClasses="grid3,grid3,grid3_2">
<h:panelGroup layout="block" id="topologyLeftPnl">
<ui:include src="/auth/admin/project/includes/flexiTopologyOptions.xhtml">
<ui:param name="beanPage" value="#{projectCreatePage}" />
<ui:param name="idPrefix" value="projectCreateWizard" />
<ui:param name="renderId" value=":projectCreateWizardFrm:topologyMiddlePnl" />
<ui:param name="enableDnD" value="false" />
<ui:param name="dragId" value=":projectCreateWizardFrm:topologyFlexiComponentsSelectedFieldset" />
<ui:param name="dropId" value=":projectCreateWizardFrm:topologyFlexiComponentsSelectedDataList" />
</ui:include>
</h:panelGroup>
<h:panelGroup>
<p:panel id="topologyMiddlePnl" styleClass="general-content">
<div class="title4">
...
</div>
<br />
<h:panelGroup id="topologyFlexiComponentsPnl">
...
<p:fieldset id="topologyFlexiComponentsSelectedFieldset">
<p:dataList type="unordered" id="topologyFlexiComponentsSelectedDataList"
value="#{projectCreatePage.revision.topology.sortedTopologyModuleDefList}" var="flexi">
<h:panelGroup layout="block">
...
<div class="col-right">
...
</div>
</h:panelGroup>
</p:dataList>
</p:fieldset>
</h:panelGroup>
</p:panel>
</h:panelGroup>
<h:panelGroup>
<p:panel id="topologyRightPnl" styleClass="general-content">
<h:panelGroup id="topologyFlexiComponentDetailPnl">
<div class="title4">
...
</div>
...
<h:panelGrid id="topologyFlexiComponentDetailTbl" columns="2" columnClasses="form-label, form-value"
rendered="#{projectCreatePage.flexiComponent != null}">
...
</h:panelGrid>
<h:panelGroup id="flexiComponentParamsPnl">
<ui:include src="/auth/admin/project/includes/flexiTopologyParams.xhtml">
<ui:param name="beanPage" value="#{projectCreatePage}" />
</ui:include>
</h:panelGroup>
<h:panelGroup id="topologyPtvPnl">
<ui:include src="/auth/admin/project/includes/flexiTopologyPtv.xhtml">
<ui:param name="beanPage" value="#{projectCreatePage.projectPtvPage}" />
<ui:param name="visible"
value="#{projectCreatePage.flexiComponent != null and projectCreatePage.flexiComponent.moduleDef.name == 'PTV'}" />
<ui:param name="editable"
value="#{!projectCreatePage.disabledAfterSaved and projectCreatePage.editTopology}" />
<ui:param name="parentRenderId" value=":projectCreateWizardFrm" />
</ui:include>
</h:panelGroup>
...
</h:panelGroup>
</p:panel>
</h:panelGroup>
</h:panelGrid>
<h:panelGroup id="topologyPopupPnl">
...
</h:panelGroup>
</p:panel>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="machine" titleStyleClass="notClickable">
<f:facet name="title">
<h:panelGroup styleClass="stepNumber">
...
</h:panelGroup>
...
</f:facet>
<p:panel id="wizardMachinePnl">
<div class="title2">
...
</div>
<p:spacer height="10" />
<p:panel id="projectCreateMachinePnl" style="border:0;">
<f:facet name="header">
<div class="col-left title3">
...
</div>
<div class="col-right title3">
...
</div>
</f:facet>
<h:panelGrid columns="2" styleClass="grid" columnClasses="grid2,grid2_2">
<h:panelGroup>
<p:panel id="projectCreateMachineLeftPnl" styleClass="general-content">
<div class="title4">
...
</div>
<br />
<h:panelGroup id="machineComponentsPnl">
<p:dataList id="machineComponentsDataList"
value="#{projectCreatePage.revision.topology.sortedTopologyModuleDefList}" var="flexi" type="unordered"
rowIndexVar="idx">
...
</p:dataList>
</h:panelGroup>
<p:remoteCommand name="clickTopologyComponentDiagramElement"
actionListener="#{projectCreatePage.onFlexiTopologyDiagramClick}"
update="projectCreateWizardFrm:projectCreateMachineRightPnl" />
</p:panel>
</h:panelGroup>
<h:panelGroup>
<p:panel id="projectCreateMachineRightPnl" styleClass="general-content">
<div class="title4">
<...
</div>
...
<h:panelGroup id="machineComponentDetailPnl" rendered="#{projectCreatePage.flexiComponent != null}">
<h:panelGrid id="machineComponentMachineSelectionTbl" columns="2" columnClasses="form-label, form-value">
...
<h:panelGroup id="serverFarmLblPnl">
...
</h:panelGroup>
<h:panelGroup id="serverFarmVallPnl">
<h:panelGroup rendered="#{projectCreatePage.revision.selectedServerFarm == null}">
...
<div class="message-description">
<h:outputText value="#{msg['workspace_hosting_location_desc']}" />
</div>
</h:panelGroup>
...
</h:panelGroup>
<h:panelGroup id="flexiMachineLblPnl">
...
</h:panelGroup>
<h:panelGroup id="flexiMachineValPnl">
...
</h:panelGroup>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup id="flexiComponentMachinePnl">
<ui:include src="/auth/admin/project/includes/flexiMachineDetail.xhtml">
<ui:param name="beanPage" value="#{projectCreatePage}" />
</ui:include>
</h:panelGroup>
</p:panel>
</h:panelGroup>
</h:panelGrid>
</p:panel>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="revision" titleStyleClass="notClickable">
<style>
.ui-button-text-icon-left .ui-button-text {
padding: 0.3em 1em .3em 2.1em!important;
}
</style>
<f:facet name="title">
<h:panelGroup styleClass="stepNumber">
<h:outputText value="5"/>
</h:panelGroup>
...
</f:facet>
<p:panel id="wizardRevisionPnl">
<div class="title2">
...
</div>
<p:spacer height="10" />
<h:panelGroup id="projectCreateRevisionPnl" styleClass="project-create-revision-panel">
<h:panelGrid id="projectCreateRevisionTbl" columns="2" columnClasses="form-label, form-value">
<h:panelGroup>
...
</h:panelGroup>
<h:panelGroup>
<p:fileUpload id="attachModel" label="#{msg['system_add']}"
listener="#{projectCreatePage.onQmodelFileUpload}"
update="uploadedQModelFileTbl" auto="true"
accept="#{projectCreatePage.getProjectHelper().getQmodelAcceptFileType()}"
disabled="#{projectCreatePage.disabledAfterSaved}"/>
</h:panelGroup>
...
<h:panelGroup>
<p:dataGrid id="uploadedQModelFileTbl" columns="1" value="#{projectCreatePage.revision.projectRevisionFileList}"
var="item" rendered="#{projectCreatePage.revision.projectRevisionFileList != null}"
emptyMessage="#{msg['template_qpa_files_empty']}">
...
</p:dataGrid>
</h:panelGroup>
...
<h:panelGroup>
<h:inputText value="#{projectCreatePage.revision.applicationId}" size="40" maxlength="100" autocomplete="false"
disabled="#{projectCreatePage.disabledAfterSaved}" styleClass="project-create-revision-input" />
<div class="message-description">
<h:outputText value="#{msg['project_revision_application_id_desc']}" />
</div>
</h:panelGroup>
...
<h:panelGroup>
...
</h:panelGroup>
<h:panelGroup>
...
<div class="message-description">
...
</div>
</h:panelGroup>
<h:panelGroup>
...
</h:panelGroup>
<h:panelGroup>
...
<div class="message-description">
...
</div>
</h:panelGroup>
<h:panelGroup>
...
</h:panelGroup>
<h:selectBooleanCheckbox id="databaseStoreChkBox" value="#{projectCreatePage.datasetStoreEnabled}"
disabled="#{projectCreatePage.disabledAfterSaved}">
<f:ajax event="click" listener="#{projectCreatePage.onDatasetStoreEnabledChange}" />
</h:selectBooleanCheckbox>
<h:panelGroup>
<h:outputLabel value="#{msg['project_database_enable']}" />
</h:panelGroup>
<h:selectBooleanCheckbox id="databaseChkBox" value="#{projectCreatePage.databaseEnabled}"
disabled="true" onclick="return false;"
/>
<h:panelGroup>
...
</h:panelGroup>
...
</h:panelGrid>
</h:panelGroup>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="confirm" titleStyleClass="notClickable">
<f:facet name="title">
<h:panelGroup styleClass="stepNumber">
<h:outputText value="6" />
</h:panelGroup>
...
</f:facet>
<p:panel id="wizardConfirmPnl" style="min-height:200px;">
<div class="title2">
...
</div>
<p:spacer height="10" />
<h:panelGroup id="projectCreateConfirmPnlGrp" styleClass="col-center-wrap">
<h:panelGroup styleClass="col-center-content">
<h:panelGrid columns="1" styleClass="col-center">
<qtag:baseMessages id="nestedMsgs1" />
<h:panelGroup rendered="#{!projectCreatePage.validationFailed}">
...
</h:panelGroup>
...
<p:spacer height="10" />
<h:panelGrid columns="1" styleClass="col-center" rendered="#{projectCreatePage.webActionPending}">
...
</h:panelGrid>
<h:panelGrid columns="2" styleClass="col-center" rendered="#{!projectCreatePage.webActionPending}">
...
</h:panelGrid>
</h:panelGrid>
<div class="clearfix"></div>
</h:panelGroup>
</h:panelGroup>
<p:spacer height="10" />
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</sec:authorize>
</h:panelGroup>
</ui:define>

Related

p:dataScroller works only for the last element

I am trying to use dataScroller to show elements of a database table. It shows all the elements correctly but when I try to use some actions it only works for the last element like:
<p:commandButton value="vote"
action="#{avisBean.updateAvis(in,email)}">
and
<p:commandButton value="commenter" icon="ui-icon-check"
action="#{avisBean.addAvis(in,email)}">`
and for the others nothings enters to the database just empty string. How can I correct this?
This is the code:
<h:form id="commandLink">
<p:dataScroller value="#{ideeBean.idees}" var="in" chunkSize="10"
mode="inline" scrollHeight="500">
<f:facet name="header">
Les Idées
</f:facet>
<h:panelGrid columns="1" style="width:100%"
columnClasses="logo,detail">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="#{msg['idee.titre']}" />
<h:outputText value="#{in.titre}" style="font-weight: bold" />
<h:outputText value="#{msg['idee.description']}" />
<h:outputText value="#{in.description}"
style="font-weight: bold" />
<h:outputText value="#{msg['idee.theme']}" />
<h:outputText value="#{in.theme}" style="font-weight: bold" />
<h:outputText value="#{msg['idee.type']}" />
<h:outputText value="#{in.type}" style="font-weight: bold" />
<!-- *******************Rating**************** -->
</h:panelGrid>
</p:outputPanel>
<h:panelGrid columns="4" cellpadding="5">
<p:commandButton value="details"
action="details?faces-redirect=true"
actionListener="#{ideeBean.attrListener}">
<f:attribute name="idee" value="#{in}" />
</p:commandButton>
<!--************************************** -->
<p:selectOneMenu id="console" value="#{avisBean.avis.score}"
style="width:125px" converter="javax.faces.Integer">
<f:convertNumber integerOnly="true" />
<f:selectItem itemLabel="Choisir" itemValue="" />
<f:selectItem itemLabel="Horrible" itemValue="1" />
<f:selectItem itemLabel="médiocre" itemValue="2" />
<f:selectItem itemLabel="Bon" itemValue="3" />
<f:selectItem itemLabel="Trés Bon" itemValue="4" />
<f:selectItem itemLabel="Excellent" itemValue="5" />
</p:selectOneMenu>
<p:commandButton value="vote"
action="#{avisBean.updateAvis(in,email)}">
</p:commandButton>
</h:panelGrid>
<!-- ***************************comments******************** -->
<p:dataScroller id="growl"
value="#{ideeBean.getAllAvisList(in.id)}" var="a" chunkSize="2">
<f:facet name="header">
commentaires
</f:facet>
<f:facet name="loader">
<p:commandButton type="button" value="Plus"
icon="ui-icon-circle-triangle-s" />
</f:facet>
<h:panelGrid columns="1">
<!-- <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" /> -->
<p:outputPanel>
<h:panelGrid columns="4" cellpadding="5">
<h:outputText value="#{a.user_avis.nom}" />
<p:inplace id="ajax" editor="true">
<p:ajax event="save" listener="#{avisBean.updateAvis(a)}" />
<h:inputText value="#{a.commentaire}"
style="font-weight: bold" rendered="#{not empty a.commentaire}" />
</p:inplace>
<p:commandButton value="Supprimer"
action="#{ideeBean.deleteAvisById(in.id,a.id)}"
icon="ui-icon-arrowrefresh-1-w"
rendered="#{utilisateurBean.getAllAvis(a,userid)}">
<f:param name="userid" value="#{loginBean.id}"></f:param>
</p:commandButton>
</h:panelGrid>
</p:outputPanel>
</h:panelGrid>
</p:dataScroller>
<!-- ***************************************** -->
<h:panelGrid columns="1">
<p:inputTextarea rows="2" cols="50" id="comment"
value="#{avisBean.avis.commentaire}" />
<p:commandButton value="commenter" icon="ui-icon-check"
action="#{avisBean.addAvis(in,email)}">
<f:param name="email" value="#{loginBean.email}"></f:param>
</p:commandButton>
</h:panelGrid>
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="resources/images/separateurr.png" />
</h:panelGrid>
</h:panelGrid>
</p:dataScroller>
</h:form>

p: dialog is not working as expected?

i have two p:commandLink:
<p:commandLink update=":form:livreDetail" oncomplete="PF('livreDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
<p:commandLink update=":form:ajoutPanel" oncomplete="if(#{ empty loginBean.c }){PF('connectDialog').show()}else {PF('ajoutLivrePanier').show()} " title="ajouter au panier">
<h:outputText styleClass="ui-icon ui-icon-cart" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
The first p:commandLink one is showing and updating the content of livreDialog p:dialog.
The second p:commandLink should show connectDialog p:dialog when loginBean.c property is null, and ajoutLivrePanier p:dialog when is not.
my code works correctly when the loginBean property is null. But when is not it gives strange results:
When i click the first p:commandLink it only shows the livreDialog p:dialog without updating it's content. Also the validation message of the connectDialog p:dialog is shown up. it is weird !!
When i click the second p:commandLink only the validation message of connectDialog p:dialog is shown up, Weird too !!
Here is the hole code:
<p:messages globalOnly="true" autoUpdate="true" showDetail="false"/>
<h:form id="form">
<p:dataGrid var="livre" value="#{livreListBean.livresList}" columns="3"
rows="12" paginator="true" id="livres"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16">
<f:facet name="header">
Livres
</f:facet>
<p:panel header="#{livre.titre}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{livre.auteur}" />
<h:outputText value="#{livre.datePublication}" />
<p:commandLink update=":form:livreDetail" oncomplete="PF('livreDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
<p:commandLink update=":form:ajoutPanel" oncomplete="if(#{ empty loginBean.c }){PF('connectDialog').show()}else {PF('ajoutLivrePanier').show()} " title="ajouter au panier">
<h:outputText styleClass="ui-icon ui-icon-cart" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:dataGrid>
<p:dialog header="Info Livre" widgetVar="livreDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="livreDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty livreDataGridView.selectedLivre}" columnClasses="label,value">
<h:outputText value="Titre:" />
<h:outputText value="#{livreDataGridView.selectedLivre.titre}" />
<h:outputText value="Auteur" />
<h:outputText value="#{livreDataGridView.selectedLivre.auteur}" />
<h:outputText value="Date de publication:" />
<h:outputText value="#{livreDataGridView.selectedLivre.datePublication}" />
<h:outputText value="Prix" />
<h:outputText value="$#{livreDataGridView.selectedLivre.prix}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<h:panelGroup id="livrePanier">
<p:dialog header="Se connecter" widgetVar="connectDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="connecterPanel" style="text-align:center;">
<h:panelGrid columns="3" >
<p:outputLabel for="mail" value="E-mail:" />
<p:inputText id="mail" value="#{loginBean.email}" required="true" requiredMessage="Vous devez entrer votre e-mail"/>
<p:message for="mail"/>
<p:outputLabel for="password" value="Password:" />
<p:password id="password" value="#{loginBean.password}" required="true" requiredMessage="Vous devez entrer votre password"/>
<p:message for="password"/>
<p:commandButton value="Se connecter" action="#{loginBean.LoginProcess()}" process="connecterPanel" update="connecterPanel"/>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
<p:dialog header="Ajouter au panier" widgetVar="ajoutLivrePanier" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="ajoutPanel" style="text-align:center;" rendered="#{not empty livreDataGridView.selectedLivre}">
<p:outputLabel value="Voulez vous ajouter ce produit au panier ?"/>
<h:panelGrid columns="2" >
<p:outputLabel value="#{livreDataGridView.selectedLivre.titre}" />
<p:outputLabel value="#{livreDataGridView.selectedLivre.prix}" />
<p:commandButton value="Oui" action="#{livreDataGridView.ajouterLivreAuPanier()}" process="connecterPanel" update="connecterPanel" oncomplete="PF('ajoutLivrePanier').hide()"/>
<p:commandButton value="Annuler" onclick="PF('ajoutLivrePanier').hide()"/>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:panelGroup>
</h:form>
i'll appreciate your help to fix the problem

You need process="#this" on your commandLinks. Without it JSF processes the whole form, that's why you see those validation failures, which in turn cause the Invoke Application phase to be skipped.
See also: Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes.

Ajax Update on PrimeFaces dialog disables datepicker, and textarea counters

I have a PrimeFaces dataTable with buttons at the footer for creating, editing and deleting records from the table.
A click on the Create and Edit button displays a modal dialog to carry out each task. During a create or Edit, the dialog is not dismissed but rather an Ajax update is done so that as many record as possible can be inserted or edit can be repeatedly done. But the issue now is, after any Ajax Update datepickers gets disabled and TextArea counters disappears. Code sample is available below:
<ui:define name="metadata">
<f:metadata>
<f:event listener="#{departmentController.retrieveDeptList}"
type="preRenderView"/>
</f:metadata>
</ui:define>
<ui:define name="title">
<h:outputText value="#{bundle.ListDepartmentTitle}" />
</ui:define>
<ui:define name="mainContent">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<h3><i class="fa fa-angle-right"></i> #{bundle.ListDepartmentMainTableTitle}</h3>
<div class="row">
<div class="col-md-12">
<div class="content-panel">
<h:form id="DepartmentListForm">
<h:panelGroup id="results" styleClass="table-responsive">
<p:spacer width="10"/>
<h:outputText id="informationMessage"
value="#{departmentController.infoMessage}"
rendered="#{departmentController.infoMessage ne null}"
styleClass="informationMessage"/>
<p:dataTable id="datalist"
value="#{departmentController.items}"
var="item"
tableStyleClass="table"
selectionMode="single"
selection="#{departmentController.newDept}"
paginator="true"
scrollable="true"
scrollHeight="250"
rowKey="#{item.deptId}"
rows="10"
rowsPerPageTemplate="10,20,30,40,50"
emptyMessage="No department results found" >
<p:ajax event="rowSelect"
listener="#{departmentController.onRowSelect}"
update="createButton editButton deleteButton viewMemButton"/>
<p:ajax event="rowUnselect"
listener="#{departmentController.onRowUnselect}"
update="createButton editButton deleteButton viewMemButton"/>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle['ListDepartmentTitle_deptName']}"/>
</f:facet>
<h:outputText value="#{item.deptName}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle['ListDepartmentTitle_dateEstablished']}"/>
</f:facet>
<h:outputText value="#{item.dateEstablished}">
<f:convertDateTime pattern="dd.MMM.yyyy" />
</h:outputText>
</p:column>
<f:facet name="footer">
<p:commandButton id="createButton"
icon="ui-icon-plus"
value="#{bundle['Create']}"
actionListener="#{departmentController.prepareCreate}"
oncomplete="PF('DepartmentCreateDialog').show()"/>
<p:spacer width="10"/>
<p:commandButton id="editButton"
process="#form"
icon="ui-icon-pencil"
value="#{bundle.Edit}"
update=":DepartmentEditForm"
oncomplete="PF('DepartmentEditDialog').show()"
disabled="#{departmentController.selectedDept eq null}" />
<p:spacer width="10"/>
<p:commandButton id="deleteButton"
icon="ui-icon-trash"
process="#form"
value="#{bundle.Delete}"
action="#{parishOfficesController.destroy}"
update=":growl, :DepartmentListForm:results"
disabled="#{departmentController.selectedDept eq null}">
<p:confirm header="Confirmation"
message="Are you sure you want to delete?"
icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true"
showEffect="fade"
styleClass="text-center"
hideEffect="fade">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes"
icon="ui-icon-check" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no"
icon="ui-icon-close" />
</p:confirmDialog>
<p:spacer width="30"/>
<p:commandButton id="viewMemButton"
value="#{bundle.ViewMembers}"
icon="ui-icon-extlink"
actionListener="#{dfView.chooseDepartment}"
disabled="#{departmentController.selectedDept eq null}" >
<p:ajax event="dialogReturn"
listener="#{dfView.onDeptMemberChosen}"
update=":growl" />
</p:commandButton>
</f:facet>
</p:dataTable>
</h:panelGroup>
<h:messages id="messages" styleClass="errorMessage"/>
</h:form>
<ui:include src="addDept.xhtml"/>
<ui:include src="editDept.xhtml"/>
</div>
</div>
</div>
</section>
</section><!-- /MAIN CONTENT -->
</ui:define>
//---------------------------------------------------------------------------
<p:dialog id="DepartmentEditDlg"
widgetVar="DepartmentEditDialog"
modal="true"
resizable="false"
appendTo="#(body)"
closable="false"
width="400"
height="300"
header="#{bundle['EditDepartmentTitle']}">
<h:form id="DepartmentEditForm" prependId="false">
<h:panelGroup id="editDisplay">
<p:messages id="editMsg" globalOnly="true" closable="true">
<p:effect type="pulsate" event="load" delay="500" />
</p:messages>
<br/>
<div class="form-group">
<h:outputLabel styleClass="labelText"
value="#{bundle.EditDepartmentLabel_deptName}"
for="editDeptName" />
<h:inputText id="editDeptName"
value="#{departmentController.newDept.deptName}"
title="#{bundle.EditParishOfficesTitle_deptName}"
required="true"
styleClass="form-control"
requiredMessage="#{bundle.EditDepartmentRequiredMessage_deptName}"/>
<h:message id="DeptEditMsg"
styleClass="errorMessage"
for="editDeptName"
showDetail="true"/>
</div>
<div class="form-group">
<h:outputLabel styleClass="labelText"
value="#{bundle.EditDepartmentLabel_dateEstablished}"
for="editDateEstablished" />
<b:datepicker id="editDateEstablished"
showButtonPanel="true"
change-month="true"
placeholder="Select a Date"
change-year="true"
value="#{departmentController.newDept.dateEstablished}"/>
</div>
<!--
<div>
<h:outputLabel styleClass="labelText"
value="#{bundle.EditDepartmentLabel_dateEstablished}"
for="editDateEstablished" />
</div>
<div>
<p:calendar id="editDateEstablished"
readonlyInput="true"
navigator="true"
mode="popup"
showButtonPanel="true"
pattern="dd.MMM.yyyy"
value="#{departmentController.newDept.dateEstablished}"
title="#{bundle.EditDepartmentTitle_dateEstablished}"
showOn="button"/>
</div>
-->
<br/>
<div class="modal-footer">
<p:commandButton actionListener="#{departmentController.update}"
value="#{bundle.Save}"
update="editDisplay,
:growl, :DepartmentListForm:results,
:DepartmentListForm:messages" />
<p:spacer width="10"/>
<p:commandButton value="#{bundle.Cancel}"
process=":DepartmentListForm"
action="#{departmentController.cancel}"
ajax="false"
onclick="DepartmentEditDialog.hide()"
update=":DepartmentListForm:results"
immediate="true" />
</div>
</h:panelGroup>
</h:form>
</p:dialog>
//--------------------------------------------------------------------------
<p:dialog id="DepartmentCreateDlg"
widgetVar="DepartmentCreateDialog"
modal="true"
resizable="false"
appendTo="#(body)"
closable="false"
width="400"
height="300"
header="#{bundle['CreateDepartmentTitle']}">
<h:form id="DepartmentCreateForm" prependId="false">
<h:panelGroup id="display">
<p:messages id="createMsg" globalOnly="true" closable="true">
<p:effect type="pulsate" event="load" delay="500" />
</p:messages>
<br/>
<div class="form-group">
<h:outputLabel styleClass="labelText"
value="#{bundle['CreateDepartmentLabel_deptName']}"
for="deptName" />
<h:inputText id="deptName"
styleClass="form-control"
value="#{departmentController.newDept.deptName}"
title="#{bundle['CreateDepartmentTitle_deptName']}"
required="true"
requiredMessage="#{bundle['CreateDepartmentRequiredMessage_deptName']}"/>
<h:message id="deptNameMsg"
styleClass="errorMessage"
for="deptName"
showDetail="true"/>
</div>
<div class="form-group">
<h:outputLabel styleClass="labelText"
value="#{bundle['CreateDepartmentLabel_dateEstablished']}"
for="dateEstablished" />
<b:datepicker id="dateEstablished"
showButtonPanel="true"
change-month="true"
placeholder="Select a Date"
change-year="true"
value="#{departmentController.newDept.dateEstablished}"/>
</div>
<!--
<div>
<h:outputLabel styleClass="labelText"
value="#{bundle['CreateDepartmentLabel_dateEstablished']}"
for="dateEstablished" />
</div>
<div>
<p:calendar id="dateEstablished"
readonlyInput="true"
navigator="true"
mode="popup"
showButtonPanel="true"
showOn="button"
pattern="dd.MMM.yyyy"
value="#{departmentController.newDept.dateEstablished}"
title="#{bundle['CreateDepartmentTitle_dateEstablished']}" />
</div>
-->
<br/>
<div class="modal-footer">
<p:commandButton actionListener="#{departmentController.create}"
value="#{bundle.Save}"
update=":DepartmentListForm:results,
:growl,
display,
:DepartmentListForm:messages" />
<p:spacer width="10"/>
<p:commandButton value="#{bundle.Cancel}"
process=":DepartmentListForm"
action="#{departmentController.cancel}"
onclick="DepartmentCreateDialog.hide()"
ajax="false"
update=":DepartmentListForm:results"
immediate="true" />
</div>
</h:panelGroup>
</h:form>
</p:dialog>

Printing in Primefaces

so I am using the printer from Primefaces, but it can not find the id of the datatable im trying to print. Anyone know why? I have removed some code for clarity. I also got the printer working on a different site but its not working here
<p:outputPanel id="topPanel" style=" display:block; height: 24%; float: top">
<h:form>
<p:growl id="messages" showDetail="true" />
<p:toolbar style="width: 100%">
<f:facet name="right">
<div style="float: right">
<p:commandButton actionListener="#{s.save}" value="Bearbeiten">
<f:param name="Bearbeiten" value="10" />
</p:commandButton>
<p:commandButton value="Drucken" type="button" icon="ui-icon-print">
<p:printer target="datatable"/>
</p:commandButton>
</div>
</f:facet>
</p:toolbar>
</h:form>
</p:outputPanel>
<p:outputPanel id="datatable" style="height: 50%">
<ui:insert name="datatable" />
<p:dataTable var="item" value="" paginator="true" rows="10" selection="" id="Datatable">
<p:column style="width:16px;text-align:center"/>
<p:column headerText="ID">
<h:outputText value="" />
</p:column>
<p:column headerText="Nachname">
<h:outputText value="" />
</p:column>
<p:column headerText="Vorname">
<h:outputText value="" />
</p:column>
</p:dataTable>
</p:outputPanel>

How to create a List in a Session and submit before

I need create a list of Phones in na and submit before.
In my firt try the object came empty and the list shows a list of null objets
<h:panelGrid id="gridPhone" columns="5">
<h:outputText value="Numero:" />
<h:inputText value="#{profileMB.phone.number}" size="10"/>
<h:outputText value="Tipo" />
<p:selectOneMenu id="selPhoneType" value="#{profileMB.phone.type}" >
<f:selectItems var="phoneType" value="#{profileMB.listPhoneTypes}" itemLabel="#{phoneType.description}" itemValue="#{phoneType}" />
</p:selectOneMenu>
<p:commandButton action="#{profileMB.addPhoneOnList()}" immediate="true" value="adicionar" update=":messageGrowl listPhones"/>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center;width: 300px;">
<p:selectOneListbox id="listPhones" >
<f:selectItems var="phones" value="#{profileMB.phones}" itemLabel="#{phones.number}" />
</p:selectOneListbox>
</h:panelGroup>
</f:facet>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/spiffygif_30x30.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
in my second try the object was filled but the Litt does update
<h:panelGrid id="gridPhone" columns="5">
<h:outputText value="Numero:" />
<h:inputText value="#{profileMB.phone.number}" size="10"/>
<h:outputText value="Tipo" />
<p:selectOneMenu id="selPhoneType" value="#{profileMB.phone.type}" >
<f:selectItems var="phoneType" value="#{profileMB.listPhoneTypes}" itemLabel="#{phoneType.description}" itemValue="#{phoneType}" />
</p:selectOneMenu>
<p:commandButton action="#{profileMB.addPhoneOnList()}" partialSubmit="true" process="gridPhone, listPhones" value="adicionar" update=":messageGrowl"/>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center;width: 300px;">
<p:selectOneListbox id="listPhones" >
<f:selectItems var="phones" value="#{profileMB.phones}" itemLabel="#{phones.number}" />
</p:selectOneListbox>
</h:panelGroup>
</f:facet>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/spiffygif_30x30.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
I have try sereval forms but dont work
:(