I want to update one component from another inside p:overlayPanel inside p:datatable
here is the code :
<p:tabView id="monpanel">
<p:tab id="tab1" title=".....">
.....
</p:tab>
<p:tab id="tab2" title=".....">
.....
</p:tab>
<p:tab id="tab3" title="Stock et fournisseurs">
<h:panelGrid>
<h:outputLabel value="Stock : "
style="text-decoration: underline;font-weight: 900;" />
<p:commandButton id="carBtn" value="Ajouter" type="button" />
<p:outputLabel id="nombref"
value="#{articlesMB.NBF} fournisseurs séléctionnés." />
<p:overlayPanel appendToBody="true" widgetVar="overlayp"
id="carPanel" for="carBtn" hideEffect="fade" dynamic="true">
<p:dataTable id="table" var="car" rowKey="#{car.fournisseurId}"
value="#{articlesMB.listfournisseurs}"
selection="#{articlesMB.selectedFournisseurs}" rows="10"
paginator="true">
<p:column selectionMode="multiple" style="width:20px" />
<p:column headerText="Id">
<h:outputText value="#{car.fournisseurId}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{car.personne.nom}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="multiViewButton" value="View"
icon="ui-icon-search" update=":nombref"
oncomplete="multiCarDialog.show()" />
</f:facet>
</p:dataTable>
</p:overlayPanel>
</p:tab>
<p:tabview>
I tested update=":nombref" and update="monpanel:nombref" and update=":monpanel:nombref" but always I have this error :
com.sun.faces.context.PartialViewContextImpl$PhaseAwareVisitCallback visit
GRAVE: javax.faces.FacesException: Cannot find component with identifier ":nombref" referenced from "monpanel:table:multiViewButton".
How can I fix this error?
Related
is it possible to keep the behaviour more stable?
what I have:
an Tree table with 3 columns, first has collapsed stuff in it
if I open one and close it, then click on sort
it is open after that
what I would like to have:
keep it closed if it was closed before sort
<h:form id="form">
<p:treeTable value="#{ttBasicView.root}" var="document">
<f:facet name="header">
FritzBox Smart Home Daten
</f:facet>
<p:column headerText="Name" >
<h:outputText value="#{document.name}" />
</p:column>
<p:column headerText="Gesamtverbrauch (in kWh)" sortBy="#{document.gesamtverbrauch}" actionListener="#{BasicView.expandAll}">
<h:outputText value="#{document.gesamtverbrauch}" />
</p:column>
<p:column headerText="aktuelle Temperatur" sortBy="#{document.akttemperatur}">
<h:outputText value="#{document.akttemperatur}" />
</p:column>
<p:column style="width:24px">
<p:commandLink update=":form:documentPanel" oncomplete="PF('documentDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search">
<f:setPropertyActionListener value="#{document}" target="#{ttBasicView.selectedDocument}" />
</p:commandLink>
</p:column>
</p:treeTable>
<p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true" resizable="false">
<p:outputPanel id="documentPanel">
<p:panelGrid columns="2" columnClasses="label,value" rendered="#{not empty ttBasicView.selectedDocument}">
<h:outputLabel for="name" value="Name: " />
<h:outputText id="name" value="#{ttBasicView.selectedDocument.name}" style="font-weight:bold" />
<h:outputLabel for="gesamtverbrauch" value="Gesamtverbrauch: " />
<h:outputText id="gesamtverbrauch" value="#{ttBasicView.selectedDocument.gesamtverbrauch}" style="font-weight:bold" />
<h:outputLabel for="akttemperatur" value="aktuelle Temperatur: " />
<h:outputText id="akttemperatur" value="#{ttBasicView.selectedDocument.akttemperatur}" style="font-weight:bold" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
That was my problem too.
Try it in your treeTable :
<p:ajax event="collapse"
onstart="handleLoadingStarted()"
oncomplete="handleLoadingStopped()" />
I have a commandButton which opens a dialog containing a table.
When the button is clicked the dialog pops out but it does not contain anything.
This is my code:
<h:panelGroup id="correctionsEntries" layout="block">
<p:dataTable styleClass="dataTable" id="entriesTable" var="entry" value="#{bean.tableModel.items}">
<p:columnGroup type="header">
<p:row>
<ui:repeat var="column" value="#{bean.tableModel.columns}" varStatus="colStatus">
<p:column headerText="#{column.header}">
</p:column>
</ui:repeat>
</p:row>
</p:columnGroup>
<c:forEach var="column" items="#{bean.tableModel.columns}">
<c:choose>
<c:when test="${column.header eq 'Upload'}">
<p:column>
<p:commandButton value="Upload" immediate="true" actionListener="#{bean.setSelectedRow(entry)}" oncomplete="PF('upload').show();" />
<p:dialog header="Upload" widgetVar="upload" height="10%" width="80%">
<p:messages binding="#{bean.component}" />
<p:fileUpload fileUploadListener="#{bean.uploadCSV}" />
</p:dialog>
</p:column>
</c:when>
<c:when test="${column.header eq 'Export'}">
<p:column>
<p:commandButton value="Download" immediate="true" ajax="false" actionListener="#{bean.setSelectedRow(entry)}">
<p:fileDownload value="#{bean.downloadCSV()}" />
</p:commandButton>
</p:column>
</c:when>
<c:when test="${column.header eq 'Display'}">
<p:column>
<p:commandButton id="displayButton" value="Display"
immediate="true"
action="#{tableBean.execute(entry)}"
update="displayTable"
oncomplete="PF('dialog').show();" />
<p:dialog id="dialog" header="Current data" widgetVar="dialog" height="80%" width="80%">
<p:dataTable styleClass="dataTable"
id="displayTable" var="tableDataVar"
value="#{tableBean.tableModel.data}"
tableStyle="width:auto;" resizableColumns="true">
<p:columns var="tableHeader" value="#{tableBean.tableModel.headers}">
<f:facet name="header">
<h:outputText value="#{tableHeader}" />
</f:facet>
<h:outputText value="#{tableDataVar[tableHeader]}" />
</p:columns>
</p:dataTable>
</p:dialog>
</p:column>
</c:when>
<c:when test="${column.header eq 'Test'}">
<p:column>
<p:commandButton value="Test" immediate="true" ajax="false" actionListener="#{bean.setSelectedRow(entry)}">
<p:fileDownload value="#{bean.testFilesDownload()}" />
</p:commandButton>
</p:column>
</c:when>
<c:otherwise>
<p:column>
<h:outputText value="#{bean.tableModel.get(entry, column)}" />
</p:column>
</c:otherwise>
</c:choose>
</c:forEach>
</p:dataTable>
</h:panelGroup>
The table is displayed only after refreshing the page.
The problem is that a dialog containing the table is created for each of the column from the parent table.
Therefore there are as many dialog as there are columns.
The fix for this was adding the dialog in a separate form, and referring it in the commandButton by specifying its path.
How can I update a primefaces datatable summary row after submitting a form (dialog)?
The datatable is already updated correctly after some CRUD operation, but the summary row doesn't. I'm using p:remoteCommand to update the summary row when filtering the datatable and it works fine.
The List.xhtml:
<h:form id="TreinamentosListForm">
<p:panel header="#{treinaBundle.ListTreinamentosTitle}" >
<p:remoteCommand name="updateFooterSumCountId" update="datalist:footerSumCountId" />
<p:dataTable id="datalist"
filteredValue="#{treinamentosController.filteredTreinamentos}"
value="#{treinamentosController.items}"
var="item"
rowKey="#{item.id}"
paginator="true"
selectionMode="single"
selection="#{treinamentosController.selected}">
<p:ajax event="filter" process="#form" update="#this" listener="#{treinamentosController.onFilter}" oncomplete="updateFooterSumCountId()" />
<p:ajax event="rowSelect" update=":TreinamentosListForm:createButton :TreinamentosListForm:viewButton :TreinamentosListForm:editButton :TreinamentosListForm:deleteButton :TreinamentosListForm:TreinamentosDataTableContextMenu" listener="#{treinamentosController.resetParents}"/>
<p:ajax event="rowUnselect" update=":TreinamentosListForm:createButton :TreinamentosListForm:viewButton :TreinamentosListForm:editButton :TreinamentosListForm:deleteButton :TreinamentosListForm:TreinamentosDataTableContextMenu" listener="#{treinamentosController.resetParents}"/>
<p:ajax event="rowDblselect" onsuccess="document.getElementById('TreinamentosListForm:viewButton').click();"/>
<p:column sortBy="#{item.id}" filterBy="#{item.id}" style="text-align: right">
<f:facet name="header">
<h:outputText value="#{treinaBundle.ListTreinamentosTitle_id}"/>
</f:facet>
<h:outputText value="#{item.id}"/>
</p:column>
<p:columnGroup id="totalGroup" rendered="true" type="footer" >
<p:row>
<p:column style="text-align:right">
<f:facet name="footer">
<!-- the summary row: -->
<h:outputText id="footerSumCountId" value="#{treinamentosController.sumCountId}" />
</f:facet>
</p:column>
</p:row>
</p:columnGroup>
</p:dataTable>
<f:facet name="header">
<p:commandButton id="createButton" icon="ui-icon-plus" value="#{treinaBundle.Create}" actionListener="#{treinamentosController.prepareCreate}" update=":TreinamentosCreateForm" oncomplete="PF('TreinamentosCreateDialog').show()"/>
<p:commandButton id="viewButton" icon="ui-icon-search" value="#{treinaBundle.View}" update=":TreinamentosViewForm" oncomplete="PF('TreinamentosViewDialog').show()" disabled="#{empty treinamentosController.selected}"/>
<p:commandButton id="editButton" icon="ui-icon-pencil" value="#{treinaBundle.Edit}" update=":TreinamentosEditForm" oncomplete="PF('TreinamentosEditDialog').show()" disabled="#{empty treinamentosController.selected}"/>
<p:commandButton id="deleteButton" icon="ui-icon-trash" value="#{treinaBundle.Delete}" actionListener="#{treinamentosController.delete}" update=":growl,datalist" disabled="#{empty treinamentosController.selected}">
<p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmDeleteMessage}" icon="ui-icon-alert"/>
</p:commandButton>
</f:facet>
</p:panel>
<ui:include src="/WEB-INF/include/confirmation.xhtml"/>
</h:form>
The Create.xhtml:
<p:dialog id="TreinamentosCreateDlg" widgetVar="TreinamentosCreateDialog" modal="true" resizable="false" appendTo="#(body)" header="#{treinaBundle.CreateTreinamentosTitle}" closeOnEscape="true" >
<h:form id="TreinamentosCreateForm">
<h:panelGroup id="display" rendered="#{treinamentosController.selected != null}">
<p:panelGrid columns="2" columnClasses="column">
<p:outputLabel value="#{treinaBundle.CreateTreinamentosLabel_id}" for="id" />
<p:outputLabel id="id" value="Value automatically generated from database." title="#{treinaBundle.CreateTreinamentosTitle_id}" />
</p:panelGrid>
<p:commandButton actionListener="#{treinamentosController.saveNew}" value="#{treinaBundle.Save}" update="#all,display,:TreinamentosListForm:datalist,:growl" oncomplete="handleSubmit(xhr,status,args,PF('TreinamentosCreateDialog'));">
<p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmCreateMessage}" icon="ui-icon-alert"/>
</p:commandButton>
<p:commandButton value="#{treinaBundle.Cancel}" onclick="PF('TreinamentosCreateDialog').hide()"/>
</h:panelGroup>
</h:form>
</p:dialog>
Thanks in advance.
After reading the Primefaces 5 documentation, what I did was to invoke (in the Create.xhtml) the Primefaces filter method, referencing through the widgetVar defined in the target datatable (in List.xhtml). Doing so, it triggers my p:remoteCommand, which in its turn, triggers the update for the summary row:
<p:commandButton actionListener="#{treinamentosController.saveNew}" value="#{treinaBundle.Save}" update="#this,display,:TreinamentosListForm:datalist,:growl" oncomplete="handleSubmit(xhr,status,args,PF('TreinamentosCreateDialog'),PF('treinamentosTable').filter());" >
<p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmCreateMessage}" icon="ui-icon-alert"/>
</p:commandButton>
If someone has a more elegant solution, please share. I had not time
Hi i have a command link so when click it i action="#{projectAdminisrationMB.showGroups(userObj)}" a fieldset will be rendred <p:fieldset legend="Manage User Groups" id="manageUserGroupsFS" rendered="#{projectAdminisrationMB.manageUserGroupsFSFlag}">
when the fieldset was in the same <ui:define name="body"> everything works but when i put it in a separated ui:define it will not be rendered.
Here's the code :
<ui:define name="body">
<h:form id="manageProjeUFform">
<div class="right">
<p:growl id="growl" showDetail="true" sticky="true" />
<br/><br/><br/><br/>
<h:panelGrid columns="2" cellpadding="10">
<p:column>
<p:fieldset legend=" Users ">
<h:panelGrid columns="2" cellpadding="10">
<p:dataTable border="1" value="#{projectAdminisrationMB.projectUsersList}"
id="projectUserDt"
var="userObj"
rowKey="#{userObj.name}"
selection="#{projectAdminisrationMB.selectedExistingProjectUser}"
selectionMode="single"
rowIndexVar="rowIndex"
binding="#{table1}">
<p:column id="column1">
<f:facet name="header">
<h:outputText value="Login"></h:outputText>
</f:facet>
<h:outputText value="#{userObj.name}"/>
</p:column>
<p:column id="column2">
<f:facet name="header">
<h:outputText value="Entire Name"></h:outputText>
</f:facet>
<h:outputText value="#{userObj.lastName}"></h:outputText>
<h:outputText value="#{userObj.firstName}"></h:outputText>
</p:column>
<p:column id="column5">
<f:facet name="header">
<h:outputText value="Groups"></h:outputText>
</f:facet>
<p:commandLink id="manageUG" title="Manage User Groups" style="margin-right:5px" update=":rightContentform:manageUserGroupsFS" action="#{projectAdminisrationMB.showGroups(userObj)}" ajax="true">
<h:graphicImage value="../images/cssImg/manage-groups-icon.png" />
<f:setPropertyActionListener target="#{projectAdminisrationMB.selectedUserRow}" value="#{userObj}" />
<f:setPropertyActionListener target="#{projectAdminisrationMB.selectedUserRow.dbRowIndex}" value="#{table.rowIndex}" />
</p:commandLink>
</p:column>
<f:facet name="footer">
<p:commandButton id="addProjectUserdlg" value=" Add " onclick="dlg1.show()" />
<p:commandButton id="deleteProjectUserdlg" value=" Delete " onclick="confirmation.show()"/>
</f:facet>
</p:dataTable>
</h:panelGrid>
</p:fieldset>
</div>
</h:form>
</ui:define>
<h:panelGrid columns="3">
<h:panelGrid id="display" header="User Detail" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/users/user.png"/>
</f:facet>
<h:outputText value="Login:" />
<h:outputText value="#{projectAdminisrationMB.selectedUserRow.lastName}" />
<h:outputText value="Name:" />
<h:outputText value="#{projectAdminisrationMB.selectedUserRow.lastName}" />
<h:outputText value="First Name:" />
<h:outputText value="#{projectAdminisrationMB.selectedUserRow.firstName}" />
<h:outputText value="Email:" />
<h:outputText value="#{projectAdminisrationMB.selectedUserRow.email}" />
<h:outputText value="Phone:" />
<h:outputText value="#{projectAdminisrationMB.selectedUserRow.phoneNumber}" />
</h:panelGrid>
<p:pickList id="pickList" value="#{projectAdminisrationMB.selectedUserGroups}" var="group"
itemLabel="#{group}" itemValue="#{group}" converter="groupConverter" >
<f:facet name="sourceCaption">Belong To</f:facet>
<f:facet name="targetCaption">Exclude From</f:facet>
<p:column style="width:25%">
<p:graphicImage value="/images/group/#{group.name}.gif" />
</p:column>
<p:column style="width:75%;">
#{group.name}
</p:column>
<p:ajax event="transfer" listener="#{projectAdminisrationMB.onTransferGroup}" update=":manageProjeUFform:growl" />
</p:pickList>
<p:commandButton id="saveGroupsBtn" value="Save" update=":manageProjeUFform:growl" actionListener="#{projectAdminisrationMB.saveUserGroupsModif}"/>
</h:panelGrid>
</p:fieldset>
</h:form>
</ui:define>
Any help will be appreciated .
here's the solution enjoy it :)
<p:commandLink id="manageUG" title="Manage User Groups" style="margin-right:5px"
update="#all" action="#{projectAdminisrationMB.showGroups(userObj)}" ajax="true">
<h:graphicImage value="../images/cssImg/manage-groups-icon.png" />
<f:setPropertyActionListener target="#{projectAdminisrationMB.selectedUserRow}" value="#{userObj}" />
<f:setPropertyActionListener target="#{projectAdminisrationMB.selectedUserRow.dbRowIndex}" value="#{table.rowIndex}" />
</p:commandLink>
i used #all to update the ui define section that's it
I want for user while typing name, update name field in tab id="tab4" of accordionPanel.
Gives me an error with java.lang.IllegalArgumentException: out - the id of the tab
<ui:define name="contentBody">
<h:form id="form2">
<p:accordionPanel id="maintab" multiple="true">
<p:tab title="New Order">
<h:panelGrid columns="1" cellpadding="5">
<p:tabView id="tabView">
<p:tab title="Client" id="tab1">
<h:panelGrid columns="6" cellpadding="5">
<h:outputText value="Name " />
<p:inputText id="name" value="#{newOrderBean.name}">
<p:ajax update=":form2:maintab:out:name_id" />
</p:inputText>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:panelGrid>
</p:tab>
<p:tab id="out" title="View Deatails">
<h:panelGrid id="panelgrid" columns="3" cellpadding="5">
<p:panel id="panel1" header="Client" style="width:200px;height:200px" >
<h:panelGrid id="grid1" columns="1">
<h:outputText id="name_id" value="#{newOrderBean.name}" />
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
</ui:define>
could you please also clarify about the cases where i need to put my components into separate forms cause just for now i put the whole page into a single form tag. Thank you
Solved it!
With this code:
<h:outputText value="Name " />
<p:inputText id="name" value="#{newOrderBean.name}">
<f:ajax event="keyup" render=":form2:maintab:name_id" />
</p:inputText>