backingBean doens't receive commandButton action - primefaces

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>

Related

Edit data in Primefaces dialog

How I can edit data in form? I have this Primefaces dialog which hI wants to use to edit data.
<p:dialog header="System User Details" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty systemusers.selectedSystemUser}" columnClasses="label,value">
<h:outputText value="Username" />
<h:outputText value="#{systemusers.selectedSystemUser.username}" />
<h:outputText value="Last Login" />
<h:outputText value="#{systemusers.selectedSystemUser.lastLogin}" />
.........
<h:outputText value="Action" />
<h:outputText value="Download Delete" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
Firstly you would need to have an <h:form /> component inside of the <p:dialog /> component tags. You would also need to change the outputText components to that of inputText.
You could use a <p:commandButton to confirm and persist the input. For example:
<p:dialog header="System User Details" widgetVar="carDialog" modal="true" appendTo="#body">
<h:form id="dialogForm">
<p:outputLabel for="username" value="Username">
<p:inputText id="username" value="#{systemusers.selectedSystemUser.username}" required="true" requiredMessage="Value is required" label="Username" />
....
<p:commandButton value="Submit" update=":mainForm" actionListener="#{beanName.updateData}" oncomplete="PF('cardDialog').hide()" />
<p:commandButton value="Cancel" type="button" onclick="PF('cardDialog').hide()" />
</h:form>
</p:dialog>

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>

p:blockUI / pe:blockUI: Why doesn't it work in my simple example?

I would like to hide an element while a button triggered action is being performed:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<pe:blockUI block="input" widgetVar="blockUIWidget">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</pe:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="growl,input"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();">
</p:commandButton>
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panelGrid>
</h:form>
I tried with p:blockUI / pe:blockUI and with/without the onstart and oncomplete attributes.
What am I doig wrong ? I use blockUI somewhere else, and it is working fine:
The only difference is that the table is its own trigger.
I followed this tutorial.
Block the input seems to not work, you can wrap the input with a panel and block it.
PrimeFaces Extensions:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<pe:blockUI target="panel" widgetVar="blockUIWidget">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</pe:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="input"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();">
</p:commandButton>
<p:panel id="panel">
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panel>
</p:panelGrid>
</h:form>
PrimeFaces:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<p:blockUI block="panel" trigger="command">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</p:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="input">
</p:commandButton>
<p:panel id="panel">
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panel>
</p:panelGrid>
</h:form>

update parameter in Java Primefaces

My problem is kinda tricky, I hope u get my explanation, I'll be as clear as I can with this.
I have a DataTable that displays a button to see the activities related with the selected item. this opens a little panel with a menu, that at the moment has only one option. This opens yet another panel with 2 forms, in with I do what I need to.
My problem comes when I use the update parameters to add the info I need into the DB.
this is the code for the button I'm using.
<p:commandLink action="#{reporteConsultorBean.verActividades(lead)}" update=":formMain:panelViewNotas" title="Ver actividades asociadas al Expediente">
<center>
<p:graphicImage value="/images/actividad32.png" />
</center>
</p:commandLink>
this is the dialog that pops out once you clicked the button.
<p:dialog id="idDialogActitividades" header="Actividades del Expediente"
widgetVar="dialogActividades" resizable="true"
showEffect="slide" hideEffect="fade">
<center>
<p:panel header="Actividades del Expediente" >
<p:panelGrid columns="1">
<p:commandLink title="Notas" onclick="dialogNotaView.show(); return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/nota.png"/>
</center>
</p:commandLink>
</p:panelGrid>
<br/>
<p:panelGrid columns="1" >
<p:commandLink title="Cerrar" onclick="dialogActividades.hide(); return false;" style="margin:0 auto">
<p:graphicImage value="/images/cerrarBoton.png"/>
</p:commandLink>
</p:panelGrid>
</p:panel>
<br />
</center>
</p:dialog>
and this is the form in which you save the data to de DB.
<p:dialog header="Notas del Expediente" width="950"
widgetVar="dialogNotaView" resizable="true" minWidth="950"
showEffect="slide" hideEffect="fade">
<p:panelGrid columns="2" width="930">
<p:panelGrid columns="1" width="75">
<p:commandLink title="Notas" onclick="return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/nota.png"/>
</center>
</p:commandLink>
</p:panelGrid>
<p:panel id="panelViewNotas" header="Notas del Expediente" width="830">
<center>
<h:form id="formNotas">
<p:messages id="messagesNotas" showDetail="true" autoUpdate="true" />
<p:panelGrid id="panelTabNotas" columns="2" width="800">
<f:facet name="header">
Nota
</f:facet>
<p:graphicImage value="/images/nota.png" />
<h:outputText value="Nota" />
<h:outputText value="" />
<h:outputText value="" />
<h:outputText value="Nombre/Tema *" />
<p:inputText value="#{reporteConsultorBean.notaView.nombre}" required="false" requiredMessage="Es necesario que ingrese el asunto"
size="50" maxlength="49" />
<h:outputText value="Descripción *" />
<p:inputTextarea value="#{reporteConsultorBean.notaView.descripcion}" rows="4" cols="65" maxlength="270"
required="false" requiredMessage="Es necesario que ingrese la descripción de la nota." />
</p:panelGrid>
<br/>
<p:panelGrid columns="2" >
<p:commandLink actionListener="#{reporteConsultorBean.saveNota}"
update=":formMain:growl,:formMain:formNotasResult:panelResultadoNotas,:formMain:formNotas:panelTabNotas,:formMain:formNotas:messagesNotas" title="Guardar Nota" style="margin:0 auto" >
<center>
<p:graphicImage value="/images/guardarBoton.png"/>
</center>
</p:commandLink>
<p:commandLink title="Cerrar" onclick="dialogNotaView.hide(); return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/cerrarBoton.png"/>
</center>
</p:commandLink>
</p:panelGrid>
</h:form>
<br/>
<p:separator style="width:700px;height:10px" />
<br/>
<h:form id="formNotasResult">
<p:panel id="panelResultadoNotas" header="Notas del Expediente" width="830">
<p:dataTable id="tablaNotasResumen" var="notaResumen"
value="#{reporteConsultorBean.notasExp}" rowKey="#{notaResumen.idNota}"
paginator="true" rows="4" emptyMessage="No hay registros"
selectionMode="single" selection="#{reporteConsultorBean.notaSelected}">
<p:column headerText="Nombre/Asunto">
#{notaResumen.nombre}
</p:column>
<p:column headerText="Descripción"> #{notaResumen.descripcion}
</p:column>
<p:column headerText="Creador">
#{notaResumen.actividad.creador}
</p:column>
<p:column headerText="Fecha Creación">
<h:outputText value="#{notaResumen.actividad.fechaCreacion}">
<f:convertDateTime type="date" pattern="dd-MM-yyyy"/>
</h:outputText>
</p:column>
<p:column>
<p:commandLink title="Editar Nota"
update=":formMain:formNotas:panelTabNotas"
action="#{reporteConsultorBean.editarNota(notaResumen)}">
<p:graphicImage value="/images/editarBoton.png" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
</center>
<br/>
</p:panel>
my problem comes when I use "panelViewNotas" in the button above. When I use it everything is displayed as it should, but when I hit the "Save" button on the last form, nothing happens (not even a nullPointerException in the Log or Tomcat).
and when I use:
update=":formMain:formNotasResult:panelResultadoNotas,:formMain:formNotas:panelTabNotas"
the data gets stored in the DB with no problem, but the View of the whole thing gets messed up "DialogNotaView" it shows one form in top of the other.
I hope you understand this problem and that u can help me.
How can I fix this problem?

Primefaces p:dialog modal="true" appendToBody it´s not working

I tried many things for this workaround, but now I found a issue with p:dialog.
If I use modal="false" everything works fine.
But if I use modal="true" and appendTo="#(body)" and want to use a footer the p:dialog doesnt work.
The h:form doesn´t validate the fields.
<p:dialog message="Add Ticket" header="Add Ticket"
draggable="true" resizable="true" closeOnEscape="true"
appendTo="#(body)" modal="true" widgetVar="addTicketReportingDialog">
<h:form id="addTicketReportingForm">
<h:panelGrid id="ticketReportingAddPanelGrid" columns="2">
<p:outputLabel for="ticketReporting_name" value="Name:" />
<p:inputText id="ticketReporting_name" size="33" required="true"
requiredMessage="Please add a value"
value="#{ticketReportingEditController.ticketReporting.title}" />
</h:panelGrid>
<br></br>
<f:facet name="footer">
<p:commandButton value="Save"
oncomplete="if (!args.validationFailed) addTicketReportingDialog.hide()"
update=":ticketReportingListForm:ticketReportingListDatatable,messagesAddTicketReporting,:addTicketReportingForm:ticketReportingAddPanelGrid"
actionListener="#{ticketReportingEditController.doSave}"
ajax="true" />
<h:outputText value=" or " />
<p:commandLink ajax="true" process="#this"
onclick="addTicketReportingDialog.hide();">
<h:outputText value="Close" />
</p:commandLink>
<p:messages id="messagesAddTicketReporting" showDetail="false"
for="messagesAddTicketReporting" autoUpdate="false"
closable="true" />
</f:facet>
</h:form>
</p:dialog>