I get the following Error on creating an composite component from primefaces dataTable. What am I doing wrong !?
Exception
javax.faces.view.facelets.TagException: /view/restrito/basico/municipio.xhtml #77,165 <p:ajax> Composite component does not support event rowSelect
tabela-padrao.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="uniqueId" required="true" />
<cc:attribute name="value" required="true" />
<cc:attribute name="var" required="true" />
<cc:attribute name="selection" required="true" />
<cc:attribute name="exportedFileName" required="true" />
<cc:attribute name="renderedTable" default="true"/>
<cc:attribute name="primaryKey" required="true"/>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<p:dataTable value="#{cc.attrs.value}"
id="#{cc.attrs.uniqueId}"
scrollable="true"
scrollWidth="100%"
var="#{cc.attrs.var}"
rendered="#{cc.attrs.renderedTable}"
selection="#{cc.attrs.selection}"
rowKey="#{cc.attrs.primaryKey}"
selectionMode="single"
paginator="true"
rowsPerPageTemplate="15,30,45"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {Exporters}"
emptyMessage="#{bundle.tabela_nenhum_registro_encontrado}">
<cc:insertChildren/>
<f:facet name="{Exporters}">
<h:commandLink style="padding: 5px 5px 5px 5px ;" title="Converter para Excel" >
<h:outputText styleClass="fa fa-file-excel-o Fs20"/>
<p:dataExporter type="xls" target="#{cc.attrs.uniqueId}" fileName="#{cc.attrs.exportedFileName}" />
</h:commandLink>
<h:commandLink style="padding: 5px 5px 5px 5px ;" title="Converter para PDF" >
<h:outputText styleClass="fa fa-file-pdf-o Fs20"/>
<p:dataExporter type="pdf" target="#{cc.attrs.uniqueId}" fileName="#{cc.attrs.exportedFileName}"/>
</h:commandLink>
</f:facet>
</p:dataTable>
</cc:implementation>
Using the Composite Component / Usando o componente
<h:form id="tabela-municipio">
<ezcomp:tabela-padrao value="#{municipioMB.listaMunicipios}"
uniqueId="id-tabela-municipio"
var="mun"
primaryKey="#{mun.id}"
selection="#{municipioMB.municipio}"
exportedFileName="municipios">
<p:ajax event="rowSelect" listener="#{municipioMB.onRowSelect}" update="#(form[id*='frm-municipio']),#(form[id*='tabela-municipio'])" />
<p:ajax event="rowUnselect" listener="#{municipioMB.onRowUnselect}" update="#(form[id*='frm-municipio']),#(form[id*='tabela-municipio'])" />
<p:column headerText="Pais" width="300" filterBy="#{mun.estado.pais.nome}" filterMatchMode="contains">
<h:outputText value="#{mun.estado.pais.nome}"/>
</p:column>
<p:column headerText="Estado" width="300" filterBy="#{mun.estado.sigla} - #{mun.estado.nome}" filterMatchMode="contains">
<h:outputText value="#{mun.estado.sigla} - #{mun.estado.nome}"/>
</p:column>
<p:column headerText="Município" filterBy="#{mun.nome}" filterMatchMode="contains">
<h:outputText value="#{mun.nome}"/>
</p:column>
</ezcomp:tabela-padrao>
</h:form>
You have to create and register the custom events in your composite component and pass the corresponding actions to datatable. As rowSelect and rowUnselect events are register on datatable not a composite component. Use clientBehavior to register the events for composite component.
<cc:interface>
...
<cc:clientBehavior name="customRowSelectEvent" targets="idOfDataTable" event="rowSelect" />
<cc:clientBehavior name="customRowUnselectEvent" targets="idOfDataTable" event="rowUnselect" />
</cc:interface>
name is name of the custom event.
targets is the id of component for which you want to actually register the action. In your case id of datatable.
event is the actual event which you want to register for the datatable.
Now register the events for composite components.
<ezcomp:tabela-padrao ....>
<f:ajax event="customRowSelectEvent" listener="#{municipioMB.onRowSelect}" update="#(form[id*='frm-municipio']),#(form[id*='tabela-municipio'])" />
<f:ajax event="customRowUnselectEvent" listener="#{municipioMB.onRowUnselect}" update="#(form[id*='frm-municipio']),#(form[id*='tabela-municipio'])" />
.....
</ezcomp:tabela-padrao>
Related
I got a datatable with a custom layout selectoneradio. It doesnt submit correct values after the first row.
This is the datatable:
<h:form id="dataTableForm">
<br />
<p:dataTable id="absenceTable" var="absence" widgetVar="absenceTable"
value="#{adminController.absenceList}" rowIndexVar="rowIndex"
emptyMessage="Keine Absenzen mit ausstehender Genehmigung gefunden"
style="width:70%;margin-left:15%;margin-right:15%;margin-bottom:20px;margin-top:10px;"
rowKey="#{absence.id}" rows="30" paginator="true"
paginatorPosition="bottom" paginatorAlwaysVisible="false"
paginatorTemplate="{PageLinks}" sortBy="#{absence.startDate}"
sortOrder="descending"
filteredValue="#{adminController.filteredAbsences}">
<f:facet name="header">Mitarbeiterabsenzen mit ausstehender Genehmigung</f:facet>
<p:column>
<p:selectOneRadio id="action" value="#{absence.status}" required="false"
layout="custom" >
<f:selectItem itemValue="PENDING" noSelectionOption="true" />
<f:selectItem itemValue="APPROVED" />
<f:selectItem itemValue="REJECTED" />
<p:ajax event="valueChange" immediate="true" listener="#{adminController.checkBoxListener}" />
</p:selectOneRadio>
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="0" />
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="1" />
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="2" />
</p:column>
<f:facet name="footer">
<p:commandButton value="Speichern"
action="#{adminController.save()}" update="absenceTable" />
</f:facet>
</p:dataTable>
</h:form>
The row index and absence loop variable is defined on the datatable.
Its all in the same form.
The problem is, somehow, it only works for the first row. The other rows submit "on" instead of the value. I found in the generated html that they are not provided with value-tag like the radiobuttons in the first row are:
I guess its gonna be a stupid syntax issue or something... This is what i get debugging clicking on anything but the first row:
Im running on PF 5.2
This is a bug in PF5.2
The code runs smoothly on PF5.3
I use primefaces in my project and i'm facing some issues with it's components.
I have a dataTabe inside an accordion and both of them are populated with a list in my managed bean. The thing is, before I put this dataTable inside the accordion the filter used to work just fine. When it was into the accordion, actualy the results were corresponding to the filter, but if I click on a comandButton in any row the object that I get from the "f:setPropertyActionListener" is not corresponding to the list after the filter.
Edit:
-Primefaces 6.0
-Dynamic Web Module 3.0
-Java 1.7
-Mojarra JSF Implementation 2.2.3
The .xhtml:
<h:form id="frmPrincipal" enctype="multipart/form-data">
<p:toolbar style="background : none; border:0px">
<f:facet name="left">
<p:commandButton value="Novo Documento" oncomplete="PF('dlgIncluirDocumento').show();"
actionListener="#{MyBean.prepararInclusao()}" update=":frmIncDocVal:pngIncDoc
:frmIncDocVal:pnlTblEmail :frmIncDocVal:pnlEmailNvDoc" />
</f:facet>
</p:toolbar>
<p:accordionPanel dynamic="true" value="#{MyBean.grupos}" var="grupo">
<p:tab title="#{grupo.nome}">
<p:dataTable id="tbValidadeDocFiltrado" widgetVar="#{grupo.idComponente}"
emptyMessage="Nenhum registro enccontrado" lazy="false"
value="#{grupo.documentos}" var="item" filteredValue="#{grupo.documentosFiltrados}"
paginator="true" rows="30" paginatorPosition="bottom" rowsPerPageTemplate="15,30,45">
<f:facet name="header"><p:outputLabel value="Validade Documento" /></f:facet>
<p:column headerText="Empresa" sortBy="#{item.tipoDocumento.empresa.nome}" filterBy="#{item.tipoDocumento.empresa.nome}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('#{grupo.idComponente}').filter()" >
<f:selectItem itemLabel="Selecione" itemValue="#{null}"
noSelectionOption="true" />
<f:selectItems value="#{MyBean.itensEmpresa}"
var="empresa" itemValue="#{empresa.nome}"
itemLabel="#{empresa.nome}" />
</p:selectOneMenu>
</f:facet>
<p:outputLabel value="#{item.tipoDocumento.empresa.nome}" />
</p:column>
<p:column headerText="Departamento"
sortBy="#{item.tipoDocumento.departamento.nome}"
filterBy="#{item.tipoDocumento.departamento.nome}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('#{grupo.idComponente}').filter()">
<f:selectItem itemLabel="Selecione" itemValue="#{null}"
noSelectionOption="true" />
<f:selectItems value="#{MyBean.itensDepartamento}"
var="departamento" itemValue="#{departamento.nome}"
itemLabel="#{departamento.nome}" />
</p:selectOneMenu>
</f:facet>
<p:outputLabel value="#{item.tipoDocumento.departamento.nome}" />
</p:column>
<p:column headerText="Documento" sortBy="#{item.tipoDocumento.nome}"
filterBy="#{item.tipoDocumento.nome}">
<p:outputLabel value="#{item.tipoDocumento.nome}" />
</p:column>
<p:column headerText="Arquivo">
<p:commandLink title="Download" value="#{item.arquivo.nome}" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);" rendered="#{item.cadastroDocumentoDownload}" disabled="#{ ! item.icArquivo}">
<f:setPropertyActionListener value="#{item}" target="#{MyBean.validadeDocumento}" />
<p:fileDownload value="#{MyBean.fileDown}" />
</p:commandLink>
</p:column>
<p:column headerText="Opções" exportable="false" width="160">
<p:commandButton icon="ui-icon-pencil" title="Alterar"
oncomplete="PF('dialog1').show();"
disabled="false" rendered="#{item.cadastroDocumentoEditar}"
action="#{MyBean.prepararAlterarTipoDocumento()}"
update=":idTituloTpDocTituloTelaDlgAlt :frmAltTpDoc:pngAltDoc">
<f:setPropertyActionListener value="#{item}" target="#{MyBean.validadeDocumento}" />
</p:commandButton>
</p:column>
</p:dataTable>
</p:tab>
</p:accordionPanel>
</h:form>
Print with the command button working:
Print with the command button not working after filter:
As you can see i first look for a person with a first commandButton, then i select a person in the datatable and i have a second commandButton, and i'd like to switch the defaultCommand on button2 after i selected a person, how can i achieve this?
<h:form id="form"
rendered="#{security.asRole('ADMIN') or security.asRole('GESTIONNAIRE')}">
<f:event type="preRenderView" listener="#{paieAgentView.init()}" />
<p:fieldset legend="Recherche de l'agent">
<p:panelGrid columns="2">
<p:panelGrid columns="2" id="pgRechercheAgent">
<h:outputLabel value="Matricule :" />
<p:inputText id="matricule"
value="#{paieAgentView.agentSearched.matricule}">
<p:ajax process="matricule" partialSubmit="true" event="keyup" />
<h:commandButton id="boutonLigneAgent"
action="#{paieAgentView.searchLigneAgent()}"
value="Rechercher les agents" icon="ui-icon-search"
update="listAgents" immediate="true" >
<f:ajax render="#form" execute="#this" />
</h:commandButton>
<br />
</p:panelGrid>
<p:dataTable id="listAgents" var="agt"
value="#{paieAgentView.listLigneAgent}"
selection="#{paieAgentView.agentSelected}"
rowKey="#{agt.matricule}" style="margin-bottom:0"
selectionMode="single" scrollRows="20" scrollable="true"
liveScroll="true" scrollHeight="250">
<p:ajax event="rowSelect" update=":form:pgRechercheContrats" />
<p:column headerText="Matricule">
<h:outputText value="#{agt.matricule}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{agt.nomPat} #{agt.prenom}" />
</p:column>
</p:dataTable>
</p:panelGrid>
<p:defaultCommand target="boutonLigneAgent" />
</p:fieldset>
<p:fieldset legend="Critères de recherche">
<p:panelGrid columns="3" id="pgRechercheContrats">
<h:panelGrid columns="1" style="margin-bottom:10px" cellpadding="5">
<p:outputLabel for="typePeriode" value="Période de paie:" />
<p:selectOneRadio id="typePeriode"
value="#{paieAgentView.typePeriode}">
<f:selectItem itemLabel="Période de paie" itemValue="paie" />
<f:selectItem itemLabel="Période d'origine" itemValue="origine" />
</p:selectOneRadio>
</h:panelGrid>
<h:panelGrid columns="2" id="pgCalendar">
<h:outputLabel value="Date Debut : " for="calendrierDateDebut" />
<p:calendar id="calendrierDateDebut"
value="#{paieAgentView.dateDebut}" pattern="yyyy-MM-dd"
effect="slideDown" navigator="true" mode="inline"
locale="#{sessionControleur.langue}" style="moisAnSeul" />
<h:outputLabel value="Date fin : "
for="calendrierDateFin" />
<p:calendar id="calendrierDateFin"
value="#{paieAgentView.dateFin}" pattern="yyyy-MM-dd"
effect="slideDown" navigator="true" mode="inline" lang="fr"
locale="fr" style="moisAnSeul" />
</h:panelGrid>
<p:selectManyCheckbox id="gridTypesPaie"
value="#{paieAgentView.selectedTypesPaie}" columns="1"
layout="pageDirection">
<f:selectItems value="#{paieAgentView.typesPaie}" var="type"
itemLabel="#{type.label}" itemValue="#{type.value}" />
</p:selectManyCheckbox>
</p:panelGrid>
</p:fieldset>
<p:commandButton process="pgRechercheContrats"
icon="ui-icon-file-pdf" value="Editer les fiches de paie"
action="#{paieAgentView.printPaieAgent()}" update="#form"
escape="false" ajax="false"
onclick="regenererCal();this.form.target='_blank'" />
</h:form>
Make 2 defaultCommands both with rendered attribute. Rendered should check if person is selected or not and action called must be appropriete on that. since you are updating whole form every time something change this should work
<p:defaultCommand target="boutonLigneAgent" rendered="#{personIsSelected()}"/>
<p:defaultCommand target="pgRechercheContrats" rendered="#{personIsNotSelected()}"/>
I have simple flow of 3 tabs. I have tested the Simple tabview example on showcase.
But When I change the first tab with my content, I can't switch to other tabs.
Kindly guide me with what is wrong that needs to be changed.
Earlier I was using Wizard but I had the same tab change problem there as clicking on next was taking me to the last tab everytime.
and Now facing other issue with Tabview
I am posting the code:
<h:form id="compositionmaster">
<p:tabView id="tabView">
<p:tab id="tab1" title="Committee Details">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Committee Type: " />
<p:selectOneMenu id="type" value="#{userWizard.comm.committeeType}" effect="fade">
<f:selectItem itemLabel="----Select----" itemValue="0" />
<f:selectItem itemLabel="New" itemValue="1" />
<f:selectItem itemLabel="Existing" itemValue="2" />
</p:selectOneMenu>
<h:outputText value="Concerned Division: " />
<p:selectOneMenu id="division" value="#{userWizard.comm.committeeSubType}" effect="fade">
<f:selectItem itemLabel="----Select----" itemValue="0" />
<f:selectItem itemLabel="Administration" itemValue="1"/>
<f:selectItem itemLabel="Finance" itemValue="2" />
<f:selectItem itemLabel="Marketing" itemValue="3" />
<f:selectItem itemLabel="Others" itemValue="4" />
</p:selectOneMenu>
<h:outputText value="Committee Name: " />
<p:inputText value="#{userWizard.comm.committeeName}" maxlength="100"/>
<h:outputText value="Subject: " />
<p:inputText value="#{userWizard.comm.committeeSubject}" maxlength="100" />
<h:outputText value="Description: " />
<p:inputText value="#{userWizard.comm.committeeDescription}" maxlength="500" />
<h:outputText value="Tenure of Committee: " />
<p:panelGrid columns="2" >
<p:inplace id="Tenure" label="From">
<p:calendar value="#{userWizard.comm.startDate}" id="start" showOn="button" />
</p:inplace>
<p:inplace label="To">
<p:calendar value="#{userWizard.comm.endDate}" id="end" showOn="button" />
</p:inplace>
</p:panelGrid>
<h:outputText value="Add Document: " />
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" mode="advanced" update="messages" multiple="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png|doc|pdf)$/"/>
</h:form>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText id="tab2Text" value="stature grows."/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText id="tab3Text" value="After a promise that his family would one day be completely legitimate."/>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
Don't use nested forms
HTML doesn't allow nested forms, so you shouldn't use them in primefaces either.They can cause undesired behavior.
See: other stackoverflow questions, or a nice collection of things to avoid in JSF: here (note point 2)
This is the only problem I see in your code. Other than that in rare cases you might have problems if using ajax and not processing the whole form. But as I can see this is not the case in your code.
I'm trying to get that code working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition 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.org/ui"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialogTable"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton value="Aggiorna" actionListener="#{clientiController.aggiorna}" update=":form:clienti" icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton value="Nuovo Cliente" actionListener="#{clientiController.nuovo}" update=":formDialog:clienteEditDialogTable" oncomplete="clienteEditDialog.show()" />
</h:form>
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true"
modal="true"
appendToBody="true">
<h:form id="formDialog">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</h:form>
</p:dialog>
</ui:define>
</ui:composition>
By clicking on "Nuovo Cliente" I get a javascript console error:
TypeError: 'undefined' is not a function (evaluating
'clienteEditDialog.show()')
It's a naming container misunderstanding of course.
Can you help me give the right ids?
In older primefaces version one could not assign the same name for widgetVar and id of a p:dialog
Try changing id="clienteEditDialog" into id="clienteEditDialogId"
You are referencing clienteEditDialogTable from different naming container. Actual id is
:formDialog:clienteEditDialogTable, so try with it. Id can be different but I can tell you more after you give the template source code.