p:fileupload is fading image after fileUploadListener event - primefaces

p:fileupload is fading image after fileUploadListener event.
Some code.
<p:dialog id="dialogIncluirArquivo2" rendered="true" header="Inclusão de arquivo" widgetVar="modalIncluirArquivo2"
resizable="false" closable="true" modal="false" width="750" height="auto">
<h:form id="formAnexo2" prependId="false" >
<div class="row">
<div class="col-md-2" style="padding-top: 8px;">
<p:fileUpload fileUploadListener="#{tombamentoFace.handleFileUploadArquivo}" mode="advanced" dragDropSupport="false"
multiple="true" fileLimit="10" fileLimitMessage="É permitido o envio de 10 arquivos por requisição"
invalidFileMessage="Arquivo inválido!" immediate="true"
label="Incluir Arquvio" invalidSizeMessage="Arquivo maior que 5mb não é permitido!"
sizeLimit="5000000" update="panel2" auto="true" />
</div>
<div class="col-md-6">
<h:outputText value="Arquivo:" style="font-weight: bold; margin-top: 10px;" class="pull-right"/>
</div>
<div class="col-md-4">
<h:commandLink actionListener="#{tombamentoFace.downloadAnexoArquivo(selectedArquivo)}" >
<h:outputText id="panel2" value="#{tombamentoFace.selectedArquivo.nome}" style="font-weight: bold; margin-top: 10px; " class="pull-left"/>
</h:commandLink>
</div>
</div>
<hr style="margin-bottom: 5px;"/>
<div class="row" style="padding-left: 15px;">
<div class="col-xs-5">
<p:commandButton value="Enviar arquivo" actionListener="#{tombamentoFace.vincularAnexoArquivo()}"
styleClass="btn btn-flat btn-success" style="color: #ecf0f1; height: 28px;" immediate="true" update="tab:table_arquivo " process="#this">
</p:commandButton>
<p:commandLink value="Cancelar" update="panel2" actionListener="#{tombamentoFace.cancelarAnexoArquivo()}" process="#this" immediate="true"/>
</div>
</div>
</h:form>
</p:dialog>

It is because it is uploading the file. If you don't want that change auto="true" to auto="false" and it won't automatically upload it and "fade the image" away.

Related

How can i show form fields when click on p:command Link?

Here is my code.
Show Fields when click on command Link.
Code for Fields:
<div class="col-md-12 Spacing" style="margin-top: 1%;">
<div class="col-md-3" style="padding-top: 7px;">
<p:outputLabel styleClass="WhiteBlue" value="Ref#" /></div>
<div class="col-md-9">
<p:inputText type="text" styleClass="form-control" required="false" requiredMessage="required" value="#{pmBean.addpfmworkorderhead.refno}" id="refno" disabled="true"/>
</div>
</div>
Code for Link:
<p:commandLink oncomplete="PF('dlgwwv').show();"
action="#{pmController.createWorkOrderFromRca}" process="#this" update="AddNewEntryDialog:RcaDialog" id="rd">
<h:graphicImage name="images/AttachDetails.gif" style="margin-left: 1%;"
title="Create Work Order with reference to RCA" />
</p:commandLink>

How can I export a p:chart type "line" to image as png or jpg file?

I am sorry for my english level but I have a problem that has been going on for more than 3 days without finding any answer. My question is how I can export as image(png o jpg file) a p:chart type "line", I'm using JSF 2.1 and primefaces 5.3.
I leave my code here ...
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:pe="http://primefaces.org/ui/extensions"
template="/plantillas/templateHistComp.xhtml">
<ui:define name="content">
<f:metadata>
<f:viewParam name="dmy" />
<f:event listener="#{InfoHistMB.init}" type="preRenderView" />
</f:metadata>
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title>::INFOAIRE::</title>
<h:outputScript name="js/layout.js" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnKoDxm56hN4vhtkWuJdnSfejjJNc60Es"></script>
<!-- <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>-->
<h:outputText value="<!--[if gte IE 9]>" escape="false" />
<style type="text/css">
/* styles for IE 9 */
</style>
<h:outputText value="<![endif]-->" escape="false" />
<ui:insert name="head" />
<h:outputStylesheet name="grid/grid.css" library="primefaces" />
</h:head>
<h:body id="bodyInfHist">
<h:outputScript library="jqplot-plugin" name="jqplot.canvasOverlay.min.js" target="head" />
<!-- <h:outputScript library="js" name="extra_config.js" target="head" /> -->
<f:view>
<h:form id="formInfoHist">
<p:breadCrumb style="margin:0 auto;">
<p:menuitem value="Inicio" url="#" />
<p:menuitem value="Info Aire" outcome="/InformacionHistorica.xhtml"/>
<p:menuitem value="Historica-Comparativa" outcome="/InfoHistComparativa.xhtml"/>
<p:menuitem value="Historica-Detalle" outcome="/InfoHistDetalle.xhtml"/>
</p:breadCrumb>
<div class="ui-fluid">
<!-- <p:messages id="messages" showDetail="true" autoUpdate="false" closable="true" /> -->
<p:panelGrid columns="6" columnClasses="ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel value="Departamento:"/>
<p:selectOneMenu id="departamentoBusqueda" value="#{InfoHistMB.departamento}" required="true" requiredMessage="Departamento es requerido!">
<p:ajax event="change" listener="#{InfoHistMB.onDepartamentChange}"
update="provinciaBusqueda,distritoBusqueda,estacionBusqueda"></p:ajax>
<f:selectItem itemLabel="Seleccione" itemValue="#{null}"/>
<f:selectItems value="#{InfoHistMB.listaDepartamento}" var="ld" id="listaDepartamentos"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoDepa}"/>
</p:selectOneMenu>
<p:outputLabel value="Provincia:"/>
<p:selectOneMenu id="provinciaBusqueda" value="#{InfoHistMB.provincia}">
<p:ajax event="change" listener="#{InfoHistMB.onProvinciaChange}"
inmediate="true" process="#form" update="distritoBusqueda,estacionBusqueda"></p:ajax>
<f:selectItem itemLabel="Seleccionar" itemValue="00" />
<f:selectItems value="#{InfoHistMB.listaProvincia}" var="ld" id="listaProvincias"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoProv}"/>
</p:selectOneMenu>
<p:outputLabel value="Distrito:"/>
<p:selectOneMenu id="distritoBusqueda" value="#{InfoHistMB.district}">
<p:ajax event="change" listener="#{InfoHistMB.onDistritoChange}"
inmediate="true" process="#form" update="estacionBusqueda"></p:ajax>
<f:selectItem itemLabel="Seleccionar" itemValue="00"/>
<f:selectItems value="#{InfoHistMB.listaDistrito}" var="ld" id="listaDistritos"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoDist}"/>
</p:selectOneMenu>
<p:outputLabel value="Estación:"/>
<p:selectOneMenu id="estacionBusqueda" value="#{InfoHistMB.estacion}">
<f:selectItem itemLabel="Seleccione" itemValue="0" />
<f:selectItems value="#{InfoHistMB.listaEstacion}" var="ld" id="listaEstaciones"
itemLabel="#{ld.vNombreEstacion}" itemValue="#{ld.idEstacion}"/>
</p:selectOneMenu>
<p:outputLabel value="Periodo de medición:"/>
<p:selectOneMenu id="periodoMedicion" value="#{InfoHistMB.idPeriodoMed}">
<p:ajax event="change" listener="#{InfoHistMB.onPeriodoMedChange}"
inmediate="true" process="#form" update="parametro,finit"></p:ajax>
<f:selectItems value="#{InfoHistMB.listaPeriodoMed}" var="ld" id="listaPeriodoMed"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.idElemento}"/>
</p:selectOneMenu>
<p:outputLabel value="Fuente:"/>
<p:selectOneMenu id="fuente" value="#{InfoHistMB.idEntidadFuente}">
<f:selectItem itemLabel="Seleccione" itemValue="0" />
<f:selectItems value="#{InfoHistMB.listaFuente}" var="ld" id="listaFuente"
itemLabel="#{ld.vDescripcion}" itemValue="#{ld.idEntidad}"/>
</p:selectOneMenu>
<p:outputLabel value="Parametro:"/>
<p:selectOneMenu id="parametro" value="#{InfoHistMB.idParametro}">
<f:selectItem itemLabel="Seleccione" itemValue="0" />
<f:selectItems value="#{InfoHistMB.listaParametro}" var="ld" id="listaParametro"
itemLabel="#{ld.vNombreParametro}" itemValue="#{ld.idParametro}"/>
</p:selectOneMenu>
<p:outputLabel value="Fecha inicio:"/>
<p:calendar value="#{InfoHistMB.ffinit}" id="finit" disabled="#{InfoHistMB.enableFecha}" effect="fold" pattern="yyyy-MM-dd" requiredMessage="Fecha es requerida!"></p:calendar>
<p:outputLabel value="Fecha fin:"/>
<p:calendar value="#{InfoHistMB.ffin}" id="fend" effect="fold" pattern="yyyy-MM-dd" requiredMessage="Fecha es requerida!" ></p:calendar>
</p:panelGrid>
<div id="buscar" align="right" style="width:100%;">
<p:commandButton value="Buscar" id="buscar" actionListener="#{InfoHistMB.updateTable}" process="#form" inmediate="true" update="tablaResultados,EstacionMarker" icon="ui-icon-search" style="margin: 15px 10px; width:100px;">
</p:commandButton>
</div>
</div>
<div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
<div class="ui-grid-row">
<div class="ui-grid-col-6" style="padding:10px 10px 0px 5px;">
<f:view contentType="text/html">
<p:gmap id="EstacionMarker" center="-12.046374, -77.042793" zoom="10" type="HYBRID" model="#{InfoHistMB.simpleModel}" style="width:100%;height:450px" />
</f:view>
</div>
<div class="ui-grid-col-6" style="padding: 0px 5px;">
<h3 style="color:#9B9995; padding:5px 5px;font-size: 1.5em;" >
Resultados Obtenidos</h3>
<p:dataTable id="tablaResultados" var="resultado" value="#{InfoHistMB.listaElementosTabla}" reflow="true" rows="5" paginator="true" tableStyle="width:auto" >
<p:column headerText="Ubigeo">
<h:outputText value="#{resultado.departamento}" />
</p:column>
<p:column headerText="Estaciones">
<h:outputText value="#{resultado.estaciones}"/>
</p:column>
<p:column headerText="Parámetros">
<h:outputText value="#{resultado.parametros}" />
</p:column>
<p:column headerText="Fecha inicio">
<h:outputText value="#{resultado.fechaInit}" />
</p:column>
<p:column headerText="Fecha fin">
<h:outputText value="#{resultado.fechaFin}" />
</p:column>
<p:column id="columnVer" headerText="Ver ">
<p:commandButton id="ver" value="Ver" actionListener="#{InfoHistMB.updateGraficolinear(resultado)}" process="#form" inmediate="true" update="formInfoHist:graficoLineal,formInfoHist:exEca,formInfoHist:exNoEca" icon="ui-icon-extlink" />
</p:column>
</p:dataTable>
</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<h2 style="padding:15px 0px; text-transform: capitalize; text-align: center; font-family: Arial, Helvetica, sans-serif;">
Comparativo entre el resultado de la búsqueda y el estandar de calidad ambiental</h2>
</div>
</div>
</div>
<div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
<div class="ui-grid-row">
<div class="ui-grid-col-9">
<p:chart id ="graficoLineal" type="line" model="#{InfoHistMB.lineModel2}" widgetVar="chartLineal" style="width:100%;height:350px;margin:20px 0" responsive="true"/>
</div>
<div class="ui-grid-col-3">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<hr style="height: 1px;background-color: #4278D5;"/>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<p:panelGrid columns="2" columnClasses="ui-grid-col-10,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
<h:outputText value="Nº de veces que se excedió el estandar de calidad ambiental " />
<h:outputText id="exEca" value="#{InfoHistMB.excedeEca}" ></h:outputText>
</p:panelGrid>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<hr style="height: 2px;background-color: #4278D5;"/>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<p:panelGrid columns="2" columnClasses="ui-grid-col-10,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
<h:outputText value="Nº de veces que no se excedió el estandar de calidad ambiental " />
<h:outputText id="exNoEca" value="#{InfoHistMB.noExcedeEca}" ></h:outputText>
</p:panelGrid>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<hr style="height: 1px;background-color: #4278D5;"/>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-12" align="center">
</div>
</div>
</div>
</div>
</div>
</div>
</h:form>
<script type="text/javascript">
function chartExtender() {
this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
}
</script>
</f:view>
</h:body>
</ui:define>
</ui:composition>
Exactly this is section of p:chart ...
<div class="ui-grid-col-9">
<p:chart id ="graficoLineal" type="line" model="#{InfoHistMB.lineModel2}" widgetVar="chartLineal" style="width:100%;height:350px;margin:20px 0" responsive="true"/>
</div>
I generate the graph dynamically from a database but I have not had a problem with it. I have used the example of the primefaces page but without any result.
Primefaces provide client side method to convert chart to an image that can be downloaded
The following is an example from primefaces reference guide
<p:chart type="line" model="#{bean.model}" style="width:500px;
height:300px" widgetVar="chart"/>
<p:commandButton type="button" value="Export" icon="ui-icon-extlink"
onclick="exportChart()"/>
<p:dialog widgetVar="dlg" showEffect="fade" modal="true"
header="Chart as an Image">
<p:outputPanel id="output" layout="block" style="width:500px;height:300px"/>
</p:dialog>
function exportChart() {
//export image
$('#output').empty().append(PF('chart').exportAsImage());
//show the dialog
PF('dlg').show();
}

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>

backingBean doens't receive commandButton action

Im using a rendered commandButton and other button to save input data, But the backing bean doens't receive input from view. I tried all proposition in this post[post]but still doens't work, any help, thanks in advance
here is a part of the code:
<ui:define name="content">
<div class=" marginA">
<div class="row">
<ul class="E">
<p:dataList value="#{userManager.user.diplomas}" var="d">
<h:panelGrid columns="2">
<h:panelGrid columns="1" cellpadding="2">
<h:outputText value="#{d.title}"/>
<h:outputText value="in #{d.dateDiploma} }"/>
</h:panelGrid>
</h:panelGrid>
</p:dataList>
</ul>
<p:commandButton action="#{userManager.switchEdit(true)}"
icon="ui-icon-plus"
type="submit"
immediate="true"
update="add"
ajax="true">
</p:commandButton>
<h:panelGrid columns="4" cellpadding="5" >
<h:outputLabel for="diploma" value="Diploma:"/>
<p:inputText id="diploma"
value="#{userManager.diploma.title}"
required="true">
</p:inputText>
<p:commandButton value="add"
actionListener="#{userManager.addDiploma()}"
imediate="true"
ajax="true"
process="#this"
icon="ui-icon-check" />
</h:panelGrid>
</div>
</div>