Having problems with Events with PrimeFaces 5 - jsf-2

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>

Related

Primefaces Datatable Dialogue box issue

I am using jsf 2.0 and primeface 3.5;
i am displaying a datatable and on the selection of any row, i display details in dailogue box. now the problem is when the page is loaded, and for the first time i select any row , the dialogue display nothing, but after that it works properly, what can be the reason of this issue
<h:body>
<h:form id="form">
<p:dataTable var="row"
value="#{user.list}" paginator="true"
rows="10" selection="#{user.selectedUser}"
filteredValue="#{user.filteredUser}" rowKey="#{row.attackID}"
rowsPerPageTemplate="5,10,15" selectionMode="single" paginatorPosition="bottom">
<p:ajax event="rowSelect" update=":form:display"
oncomplete="dlg.show()" listener="#{user.selected()}"/>
<p:column headerText="User-ID" filterBy="#{row.userID}">
<h:outputText value="#{row.userID}" />
</p:column>
<p:column headerText="Name" filterBy="#{row.userName}">
<h:outputText value="#{row.userName}" />
</p:column>
<p:column headerText="Threat" filterBy="#{row.attackID}">
<h:outputText value="#{row.attackID}" />
</p:column>
<p:column headerText="Rank">
<h:outputText value="#{row.rank}" />
</p:column>
</p:dataTable>
<p:dialog id="tDialog" header="Threat info" widgetVar="dlg"
modal="true" height="250" width="300" showEffect="explode"
hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Attack ID:" />
<h:outputText value="#{user.selectedUser.attackID} " />
<h:outputText value="Name:" />
<h:outputText value="#{user.selectedUser.attackName}" />
<h:outputText value="Action Taken:" />
<h:outputText value="#{user.selectedUser.actionTaken}" />
<h:outputText value="Attack Time:" />
<h:outputText value="#{user.selectedUser.attackTime }" />
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>

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>

call a method of backingbean when finished filtering the table ends

Call a method of backingbean when finished filtering the table ends. Using Primefaces, datatable look like this:
<p:dataTable id="tabla_gral" rendered="#{consumoMaterial.verTabla}" var="item" paginator="true" rows="15" rowKey="#{item.no}" value="#{consumoMaterial.listadoConsumo}" filteredValue="#{consumoMaterial.listadoConsumoFiltered}">
<p:ajax event="filter" listener="#{consumoMaterial.actualizarSaldos}" update=":form2:tabla_gral" />
<f:facet name="header">
<h:outputText value="Búsqueda de Consumo por: #{consumoMaterial.tipoBuscar}: '#{consumoMaterial.codigo}'" />
</f:facet>
<p:column exportable="#{consumoMaterial.no}" rendered="#{consumoMaterial.no}" id="cclave" sortBy="#{item.no}" filterBy="#{item.no}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="Nro" />
</f:facet>
<h:outputText value="#{item.no}" />
</p:column>
<p:column exportable="#{consumoMaterial.centroCosto}" rendered="#{consumoMaterial.centroCosto}" id="cconcepto" sortBy="#{item.centroCosto}" filterBy="#{item.centroCosto}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="Centro de Costo" />
</f:facet>
<h:outputText value="#{item.centroCosto}" />
</p:column>
<p:column exportable="#{consumoMaterial.codigoAlmacen}" rendered="#{consumoMaterial.codigoAlmacen}" id="ctipo" sortBy="#{item.codigoAlmacen}" filterBy="#{item.codigoAlmacen}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="Almacén" />
</f:facet>
<h:outputText value="#{item.codigoAlmacen}" />
</p:column>
</p:dataTable>
ajax event="filter" does not work because is while filtering not when it finish.
You can: in filter event, you call JavaScript function in oncomplete or onsuccess(it depend on your target), the JavaScript function will fire click event to commandbutton, and you put action code you want to that commandbutton:
<h:form id="form">
<script type="text/javascript">
function test(){
$(PrimeFaces.escapeClientId('form:btn')).click();
}
</script>
<p:commandButton style="display:none !important" id="btn" oncomplete="alert('ab');" value="SB"/>
<p:dataTable var="carr" value="#{tabview.l1}" id="carList" >
<p:ajax event="filter" oncomplete="test();"/>
<p:column filterMatchMode="contains" filterBy="#{carr.model}" headerText="Model" style="width:30%">
<h:outputText value="#{carr.model}" />
</p:column>
<p:column headerText="MANUFAC" style="width:20%">
<h:outputText value="#{carr.manufacturer}" />
</p:column>
</p:dataTable>
</h:form>

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"

primefaces context menu do not update to dialog box input

I have see this problem.Please see my jsf page.
<h:form id="companyList">
<p:contextMenu for="companiesDB" style="height:53px;">
<p:menuitem value=" edit" update="panelGrid" icon="ui-icon-pencil" oncomplete="editCompany.show()" />
<p:menuitem value=" delete" update="panelGrid" icon="ui-icon-closethick" onclick="editCompany.show()" />
</p:contextMenu>
<p:dataTable id="companiesDB" var="companies"
value="#{companyController.companyList}" rowKey="#{companies.pkId}"
selection="#{companyController.selectedCompany}"
selectionMode="single" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rows="20" >
<p:column headerText="name">
#{companies.companyName}
</p:column>
<p:column headerText="desc">
#{companies.description}
</p:column>
</p:dataTable>
<p:dialog header="edit mode" widgetVar="editCompany"
modal="true" height="160" width="390"
id="dialog" resizable="false">
<p:panelGrid cellpadding="10" id="panelGrid" >
<p:row>
<p:column width="300">
<h:outputText value="name:" style="float:left;" />
</p:column>
<p:column>
<p:inputText value="#{companyController.selectedCompany.companyName}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="desc:" style="float:right;" />
</p:column>
<p:column>
<p:inputText
value="#{companyController.selectedCompany.description}" />
</p:column>
</p:row>
</p:panelGrid>
<br />
<br />
<p:commandButton value="save" icon="ui-icon-check"
style="float:right; margin-right:25px;" update="companiesDB"
oncomplete="addCompany.hide();"
action="#{companyController.insertCompany()}">
</p:commandButton>
</p:dialog>
</h:form>
And console error was :
/company.xhtml #46,91 value="#{companyController.selectedCompany.companyName}": Target Unreachable, 'selectedCompany' returned null
try renaming your dialog id to mydialog (just to be on a safe side)
and update your menu item entry as following (notice the update="mydialog"):
<p:menuitem value="edit" update="mydialog" icon="ui-icon-pencil" oncomplete="editCompany.show()" />
also , make sure the edit button will be enabled only after a selection in table was made... otherwise you will get the null pointer...
you can achieve it with something like
<p:menuitem value="edit" disabled=#{companyController.selectedCompany eq null}.....
and add two p:ajax in your table
<p:dataTable.......>
<p:ajax event="rowSelect" update="contextMenuID" />
<p:ajax event="rowUnselect" update="contextMenuID" />
last thing : add id=contextMenuID to your context menu

Resources