Updating a dynamic generated selectOneMenu - jsf-2

In my web app i have the following DataTable:
<!-- Exibição da lista de públicos -->
<p:dataTable id="dtEventos"
value="#{relatoriosBean.listaEventos}"
paginator="true" rows="5"
rowsPerPageTemplate="5,10"
paginatorPosition="bottom"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
var="atual"
emptyMessage="Não há eventos para exibição"
rendered="#{relatoriosBean.exibirPainelDados}">
<f:facet name="header">
Eventos
</f:facet>
<p:column sortBy="#{atual.nmeEvento}" styleClass="wrap">
<f:facet name="header">
Nome
</f:facet>
<p:panelGrid columns="1"
styleClass="gridNoLine">
<h:outputLabel id="olViewNomeEvento"
value="#{atual.nmeEvento}"
styleClass="t2"/>
<p:separator title="Descrição do evento"/>
<p:row>
<h:outputLabel value="Início: " styleClass="t2"/>
<h:outputLabel value="#{atual.dtaInicioEvento}"/>
<h:outputLabel value="Término: " styleClass="t2"/>
<h:outputLabel value="#{atual.dtaTerminoEvento}"/>
</p:row>
<h:outputLabel value="#{atual.dscEvento}"
styleClass="wrap"/>
</p:panelGrid>
</p:column>
<p:column>
<f:facet name="header">
Relatórios
</f:facet>
<p:panelGrid columns="2" styleClass="gridNoLine">
<p:selectOneMenu value="#{relatoriosBean.tipoEventoRelatorioSelecionado}"
required="true"
requiredMessage="Selecione o relatório a ser gerado."
effect="fade">
<f:selectItem itemLabel="Selecione um item..." itemValue=""/>
<f:selectItems value="#{relatoriosBean.tiposEventoRelatorios}">
</f:selectItems>
</p:selectOneMenu>
<p:commandButton icon="ui-icon-document"
title="Gerar relatório"
actionListener="#{relatoriosBean.gerarRelatorio}"
update="UPDATE THE SELECTONEMENU OF THE LINE">
<f:setPropertyActionListener value="#{atual.idtEvento}"
target="#{relatoriosBean.idEventoSelecionado}}"/>
</p:commandButton>
</p:panelGrid>
</p:column>
</p:dataTable>
As you can see, inside one of the datatable columns i have a selectOneMenu. In the same column i have a button with a actionListener setted. Well, what i want is: Update the selectOneMenu of the column based on the click of the commandButton. There is a way to do this?
Ok! Now the f:setPropertyActionListener isn't setting the property eventoSelecionado. Here is the code:
<p:dataTable value="#{relatoriosBean.listaEventos}"
var="atual">
...
<p:column>
<f:facet name="header">
Relatórios
</f:facet>
<p:panelGrid columns="2"
styleClass="gridNoLine">
<p:selectOneMenu id="somRelatorios"
value="#{relatoriosBean.relatorioSelecionado}"
required="true"
requiredMessage="Selecione o relatório a ser gerado."
effect="fade">
<f:selectItem itemLabel="Selecione um item..." itemValue=""/>
<f:selectItems value="#{relatoriosBean.relatorios}">
</f:selectItems>
</p:selectOneMenu>
<p:commandButton id="cbGerarRelatorio"
icon="ui-icon-document"
title="Gerar relatório"
actionListener="#{relatoriosBean.gerarRelatorio}"
update=":frmRelatorios:opPainelDados"
process="#this somRelatorios"
immediate="true">
<f:setPropertyActionListener target="#{relatoriosBean.eventoSelecionado}"
value="#{atual}"/>
</p:commandButton>
</p:panelGrid>
</p:column>
</p:dataTable>
In the gerarRelatorio action listener, the property eventoSelecionado is comming as null. What is wrong?

Sure, add this id=mySelectOne to your <p:selectOneMenu/> and on your <p:commandButton/> set the update attribute to update="mySelectOne". But to get the best results on this ajax update, I'd strongly advise you set your managed bean annotation to #ViewScoped if you haven't already done so. Your command button should look like this at the end of the update
<p:commandButton icon="ui-icon-document"
title="Gerar relatório"
actionListener="#{relatoriosBean.gerarRelatorio}"
update="mySelectOne">

Related

Having problems with Events with PrimeFaces 5

I am using PrimeFaces 5. Trying to learn it.
I am working on this particular screen for almost 3 days and had no progress.
I read the showcase of Primefaces lots of times, but everything seems to be in order. It is possible that I am addicted to my code and can not see the answer, but it seems to be all liked because it is all associated with events, or so it seems.
Problems:
- My DropDown (selectOneMenu) does not respond to click events to show its options;
- The arrows that do the paging of my search results does not respond to click as well;
- The search button does not respond after the first search;
- The View buttons does not displays the dialog;
- The growl component is also not recieving updates;
I am supplying the link to download the sourcecode here
- https://dl.dropboxusercontent.com/u/5784798/par.7z
Here it is the form working
<h:form id="formularioResultadoUsuario">
<p:dataTable var="usuario"
value="#{adiminstraUsuarioView.lazyUsuarioDataModel}"
paginator="true" rows="10"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15" rowKey="#{usuario.id}"
selectionMode="single"
selection="#{adiminstraUsuarioView.selectedUsuario}"
id="usuarioTable" lazy="true">
<p:ajax event="rowSelect"
listener="#{adiminstraUsuarioView.onRowSelect}"
update=":formularioResultadoUsuario:usuarioDetail"
oncomplete="PF('usuarioDialog').show()" />
<p:column headerText="Id" sortBy="#{usuario.id}"
filterBy="#{usuario.id}">
<h:outputText value="#{usuario.id}" />
</p:column>
<p:column headerText="Nome" sortBy="#{usuario.nome}"
filterBy="#{usuario.nome}">
<h:outputText value="#{usuario.nome}" />
</p:column>
<p:column headerText="Grupo" sortBy="#{usuario.grupo}"
filterBy="#{usuario.grupo}">
<h:outputText value="#{usuario.grupo}" />
</p:column>
<p:column headerText="Role" sortBy="#{usuario.role}"
filterBy="#{usuario.role}">
<h:outputText value="#{usuario.role}" />
</p:column>
<p:column headerText="Sistema" sortBy="#{usuario.sistema}"
filterBy="#{usuario.sistema}">
<h:outputText value="#{usuario.sistema}" />
</p:column>
<p:column headerText="Subsistema" sortBy="#{usuario.subsistema}"
filterBy="#{usuario.subsistema}">
<h:outputText value="#{usuario.subsistema}" />
</p:column>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="usuarioDialog" modal="true"
showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="usuarioDetail" style="text-align:center;">
<p:panelGrid columns="2"
rendered="#{not empty adiminstraUsuarioView.selectedUsuario}"
columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{adiminstraUsuarioView.selectedUsuario.id}" />
<h:outputText value="Nome" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.nome}" />
<h:outputText value="Grupo:" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.grupo}" />
<h:outputText value="Role:" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.role}" />
<h:outputText value="Sistema:" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.sistema}" />
<h:outputText value="Subsistema:" />
<h:outputText
value="#{adiminstraUsuarioView.selectedUsuario.subsistema}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>

primefaces dataTable editMode works fine outside dialog but not working inside it

I am using JSF 2.2 with PrimeFaces 5.0. I have a dataTable with cell-editing.
I am having problems with the dataTable inside dialog when I set editMode="cell", the outputtext after editing it's doesn't appear, but when i put the datatable edit outside dialog, it's work.When I inspect the element of datatable
<div class="ui-cell-editor-output" style="display: none;"></div> it's empty but if i put the datatable edtor outside dialog the outPut element isn't empty
Let me explain with some code:
<p:dialog id="modif" width="80%" widgetVar="w_edit" modal="true" >
<p:tabView >
<p:tab title="Controle de Réception ">
<h:panelGrid>
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme(lotRecpBean.currentLotReception.entrant)}"
var="item" editable="true" editMode="cell" >
<p:column headerText="Valeur Controle" styleClass="ui-editable-column">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{item.valeurControle}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{item.valeurControle}" style="width: 50%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column width="15%" headerText="Testeur">
<p:cellEditor >
<f:facet name="output"><h:outputText value="#{item.testeurCR.nom}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{item.testeurCR.nom}" style="width:50%">
<f:selectItems value="#{personnelBean.liste}" var="perso" itemLabel="#{perso.nom}" itemValue="#{perso}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:panelGrid>
</p:tab>
</p:tabView>
</p:dialog>
I hope (like always) any of you could save me again.
All user input must be inside of a form. You'll need an <h:form> inside the dialog.
I still have the same problem when i modify the row in datatable editor inside dialog the outputtext doesn't change still have the old value ,but when i put this datatable in simple page work
<p:dialog id="modif" width="80%" widgetVar="w_edit" modal="true" >
<p:tabView >
<p:tab title="Controle de Réception ">
<h:form>
<h:panelGrid>
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme(lotRecpBean.currentLotReception.entrant)}"
var="item" editable="true" editMode="cell" >
<p:column headerText="Valeur Controle" styleClass="ui-editable-column">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{item.valeurControle}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{item.valeurControle}" style="width: 50%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column width="15%" headerText="Testeur">
<p:cellEditor >
<f:facet name="output"><h:outputText value="#{item.testeurCR.nom}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{item.testeurCR.nom}" style="width:50%">
<f:selectItems value="#{personnelBean.liste}" var="perso" itemLabel="#{perso.nom}" itemValue="#{perso}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:panelGrid>
<h:form>
</p:tab>
<p:tab title="Info lot de Réception">
<h:form>
<p:panelGrid id="idPanel">
<p:row>
<p:column><p:outputLabel value="QuantiteLivree:" for="quantiteLivree" /></p:column>
<p:column><p:inputText id="quantiteLivree" value="#{lotRecpBean.currentLotReception.quantiteLivree}" title="QuantiteLivree" /></p:column>
<p:column><p:outputLabel value="QuantiteRecue:" for="quantiteRecue" /></p:column>
<p:column><p:inputText id="quantiteRecue" value="#{lotRecpBean.currentLotReception.quantiteRecue}" title="QuantiteRecue" /></p:column>
<p:column><p:outputLabel value="NumBonLivraison:" for="numBonLivraison" /></p:column>
<p:column><p:inputText id="numBonLivraison" value="#{lotRecpBean.currentLotReception.numBonLivraison}" title="NumBonLivraison" /></p:column>
</p:row>
</p:panelGrid>
<div>
<p:commandButton action="#{lotRecpBean.update()}" value="Enregistrer" styleClass="button"
style="float: right" oncomplete="PF('lotRecepTable').filter();PF('w_edit').hide();" />
</div>
</h:form>
</p:tab>
</p:tabView>
</p:dialog>
I fixed the problem , it's come from the value of datatable ===> the value of datatable editor must be a list and not a method which return a list datatable editor work just with a list 1-
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme}"
var="item" editable="true" editMode="cell" >
I create a list in the managed bean t and in the button i execute the method to full the list created in the managed bean . thank you for your response

ActionListener method of a CommandButton inside Datatable (within TabView) don't work

I've a CommandButton component inside Datatable, which is within a TabView component. ActionListener method of CommandButton component don't work. Never is fired.
This is my XHTML page:
<p:dialog id="dlgView" widgetVar="wvDlgView"
modal="true" closable="true" resizable="false">
<p:outputPanel id="opViewUser">
<h:form>
<p:tabView id="tabViewUser">
<p:tab title="DATOS PERSONALES">
<p:dataTable id="dtUsuarios" rows="5" paginator="true"
selectionMode="single" selection="#{personController.system}">
....
<p:column>
<p:commandButton value="Bloquear" actionListener="#{personController.block}" />
</p:column>
</p:dataTable>
</p:tab>
<p:tabView>
</h:form>
</p:outputPanel>
</p:dialog>
Thanks in advance :)
PD: PF 3.5, JSF (Mojarra) 2.1.3, Tomcat: 6.0.10
Sorry for not posting completely code and answer later. At any rate I think already it isn't necessary because I solved my problem. Explain in more detail the problem:
I had a structure similar to this on tab component:
<p:tab>
<h:form id="formTab" prependId="false">
<h:panelGrid columns="3">
<p:outputLabel value="Sistema " for="sltSystem"/>
<p:selectOneMenu id="sltSistema" required="true"
value="#{personController.idSistema}" >
<f:selectItems value="#{personController.listSistemas"
var="s" itemLabel="#{s.valor}" itemValue="#{s.id}"/>
</p:selectOneMenu>
<p:outputLabel value="Rol " for="sltRol"/>
<p:selectOneMenu id="sltRol" required="true"
value="#{personController.idRol}" >
<f:selectItems value="#{personController.listRoles}"
var="r" itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
<p:dataTable id="dtUsersSystems" rows="5" paginator="true"
value="#{personController.userSystems}" var="s" rowKey="#{s.id}" >
<p:column headerText="SISTEMA">
<h:outputText value="#{s.sistema}" />
</p:column>
<p:column headerText="ROL">
<h:outputText value="#{s.rol}" />
</p:column>
<p:column headerText="ESTADO">
<h:outputText value="#{s.estado}"/>
</p:column>
<p:column>
<p:commandButton value="Bloquear" icon="ui-icon-cancel" actionListener="#{personController.blocked}"></p:commandButton>
</p:column>
</p:dataTable>
<h:form>
</p:tab>
As you can see sltSystem and sltRol components have required attribute in true. For that when I clicked on button "Bloquear" its ActionListener method not was invoked because after I should select a value on sltSystem and sltRol components.
Therefore new page structure is this:
<p:tab>
<h:form id="formSelect" prependId="false">
<h:panelGrid columns="3">
<p:outputLabel value="Sistema " for="sltSystem"/>
<p:selectOneMenu id="sltSistema" required="true"
value="#{personController.idSistema}" >
<f:selectItems value="#{personController.listSistemas"
var="s" itemLabel="#{s.valor}" itemValue="#{s.id}"/>
</p:selectOneMenu>
<p:outputLabel value="Rol " for="sltRol"/>
<p:selectOneMenu id="sltRol" required="true"
value="#{personController.idRol}" >
<f:selectItems value="#{personController.listRoles}"
var="r" itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
</h:form>
<h:form id="formDataTable" prependId="false">
<p:dataTable id="dtUsersSystems" rows="5" paginator="true"
value="#{personController.userSystems}" var="s" rowKey="#{s.id}" >
<p:column headerText="SISTEMA">
<h:outputText value="#{s.sistema}" />
</p:column>
<p:column headerText="ROL">
<h:outputText value="#{s.rol}" />
</p:column>
<p:column headerText="ESTADO">
<p:graphicImage value="#{s.estado}"/>
</p:column>
<p:column>
<p:commandButton value="Bloquear" icon="ui-icon-cancel" actionListener="#{personController.blocked}"></p:commandButton>
</p:column>
</p:dataTable>
<h:form>
</p:tab>
A form for selectonemenu components and other form for datatable component.
Thanks to all :)

primefaces autocomplete works fine outside datatable but not working inside it

I have this autocomplete component below that works outside the datatable but it doesn't work inside it
I don't see the cause :
<p:dataTable id="table" var="car" editable="true" editMode="cell"
widgetVar="carsTable" rowKey="#{car.idarticleFourniseur}"
value="#{articlesMB.listarticlefournisseurs}" rows="3">
<p:ajax event="cellEdit" listener="#{articlesMB.onCellEdit}"
update=":messages" />
<p:column headerText="Id">
<h:outputText value="#{car.idarticleFourniseur}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{car.libelle}" />
</p:column>
<p:column headerText="Fournisseur">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.fournisseur.personne.nom}" />
</f:facet>
<f:facet name="input">
<p:autoComplete id="dfdd" var="p" itemLabel="#{p.personne.nom}"
itemValue="#{p}" dropdown="true" process="#this"
value="#{articlesMB.selectedFournisseur}"
forceSelection="true" converter="#{fournisseursConverter}"
completeMethod="#{articlesMB.complete}">
<p:column>
#{p.personne.nom} - #{p.personne.prenom}
</p:column>
</p:autoComplete>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:autoComplete id="dfd" var="p" itemLabel="#{p.personne.nom}"
itemValue="#{p}" dropdown="true" process="#this"
value="#{articlesMB.selectedFournisseur}" forceSelection="true"
converter="#{fournisseursConverter}"
completeMethod="#{articlesMB.complete}">
<p:column>
#{p.personne.nom} - #{p.personne.prenom}
</p:column>
</p:autoComplete>
the second autocomplete works fine, but the first (in datatable) doesn't work (the completion does not appear)
do you have any idea
thank you in advance
Instead of celleditor you can use inplace
<p:inplace editor="true" label="#{contactRole.userDto.fullContactData}" emptyLabel="#{msgs['constructionSite.text.contact']}">
<p:autoComplete value="#{contactRole.userDto}"
id="contact1" completeMethod="#{assignContactBean.completeContacts}"
var="c" itemLabel="#{c.fullContactData}" itemValue="#{c}"
converter="#{assignContactBean}" forceSelection="true" scrollHeight="200"/>
</p:inplace>

javax.Servlet.ServletException:cannot find component with identifier ":form:display"

Hi i need to create a accordian panel with a datatable inside the tab1 but i am geeting the following error:: javax.Servlet.ServletException:cannot find component with identifier ":form:display" ,can anyone plz help me out to resolve this error using primefaces.i need to work without using widgets.
view.xhtml
<h:form prependId="false" id="form">
<p:dataTable id="dataTable" var="car" value="#{tableBean.getList()}"
paginator="true" rows="10" selectionMode="single" selection="#{tableBean.selectedCar}" rowKey="#{car.model}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<f:facet name="header">
Posted Jobs
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="Model" />
</f:facet>
<h:outputText value="#{car.model}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Year" />
</f:facet>
<h:outputText value="#{car.year}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Manufacturer" />
</f:facet>
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Color" />
</f:facet>
<h:outputText value="#{car.color}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:display" oncomplete="carDialog.show()" actionListener="#{tableBean.add}"
/>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Car Detail" widgetVar="carDialog" resizable="false"
width="200" showEffect="clip" hideEffect="fold">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Model:" />
<h:outputText value="#{tableBean.selectedCar.model}" />
<h:outputText value="Year:" />
<h:outputText value="#{tableBean.selectedCar.year}" />
<h:outputText value="Manufacturer:" />
<h:outputText value="#{tableBean.selectedCar.manufacturer}" />
<h:outputText value="Color:" />
<h:outputText value="#{tableBean.selectedCar.color}" />
</h:panelGrid>
</p:dialog>
</h:form>
AccordionPanel.xhtml
<h:head>
<title>Accordion Panel</title>
</h:head>
<h:body>
<h:form>
<p:accordionPanel>
<p:tab id="DataTable1" title="DataTable 1">
<ui:include src="view.xhtml" />
</p:tab>
<p:tab id="DataTable2" title="DataTable2">
</p:tab>
</p:accordionPanel>
</h:form>
</h:body>
</html>
You are getting this error because the update target of your commandButton can not be found using the specified component reference on the rendered html.
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:display" oncomplete="carDialog.show()" actionListener="#tableBean.add}"/>
Try removing the update=":form:display" so that your page can render, check the generated component id of the display panelGrid with Firebug and use that id in your update target.
Since primefaces version 3.1 component referencing is aligned with the JSF Spec. See this link for further information UI Component findComponent()
update your (update=":form:display") attribute on commandButton to this :
update=":form:dialog:display"

Resources