commandButton update attribute not working - ajax

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.

Related

Primefaces TreeTable sorting freze collapse

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()" />

JSF Show PanelGrid row/items based on selectone menu

I'm have a submit form and would like to display a row where they enter a birthdate if the relationship selected is a son or daughter.
I finally got things to work but it feels clunky and verbose with the use <p:row> Plus I couldn't get the update to work unless I used #form which then required the extra <p:ajax> on first/last name textinputs since their values would disappear if entered before a selection in the drop down was made.
This works but seems verbose
<h:form id="form2">
<p:panel header="Add a Non-Member">
<p:panelGrid>
<p:row>
<p:column>
<h:outputLabel for="fname" value="First Name: " />
</p:column>
<p:column>
<p:inputText id="fname" required="true"
value="#{memberManager.newNonMember.first_name}" >
<p:ajax update="#form" />
</p:inputText>
</p:column>
<p:column>
<p:message for="fname"></p:message>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputLabel for="lname" value="Last Name: " />
</p:column>
<p:column>
<p:inputText id="lname" required="true"
value="#{memberManager.newNonMember.last_name}" >
<p:ajax update="#form" />
</p:inputText>
</p:column>
<p:column>
<p:message for="lname"></p:message>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Relationship: " />
</p:column>
<p:column>
<p:selectOneMenu id="relationship" value="#{memberManager.newNonMember.type}" required="True"
requiredMessage="Relationship is required for non-member">
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{memberManager.relationTypes}" var="type" itemValue="#{type}" itemLabel="#{type.label}" />
<p:ajax update="#form" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:message for="relationship" />
</p:column>
</p:row>
<p:row id="birthrow">
<p:column>
<h:outputLabel for="nm_birth_date" value="#{memberManager.newNonMember.type.label}'s Birthdate: "
rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}" />
</p:column>
<p:column>
<p:calendar id="nm_birth_date" showOn="button" navigator="true" value="#{memberManager.newNonMember.birth_date}"
rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
required="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
pattern="MM/dd/yyyy" mask="true"
requiredMessage="Your #{memberManager.newNonMember.type.label}'s Birthdate is required" />
</p:column>
<p:column>
<p:message for="nm_birth_date"></p:message>
</p:column>
</p:row>
</p:panelGrid>
<br />
<p:commandButton value="Add" action="#{memberManager.addAction}" ajax="false" />
</p:panel>
</h:form>
When I kept the panelGrid but used update="birthrow" on just the selectOneMenu ajax and removed the inputText ajax the birthdate row didn't update as expected, including after form was submitted with errors (ie last name required, then the ajax update stopped working)
Originally I wasn't using p:row or p:column but instead the columns attribute on the panel grid. But based on this How to rendered <p:selectOneMenu> by BalusC I knew I needed a wrapper component which is why I went the p:row route.
But is there a cleaner way to not use all the p:rows and extra ajax on the text inputs?
You could just have wrapped individual cells in a <h:panelGroup> without the need for all that <p:row><p:column> verbosity.
<h:panelGroup id="birthdateLabel">
<h:outputLabel ... />
</h:panelGroup>
<h:panelGroup id="birthdateInput">
<p:calendar ... />
</h:panelGroup>
<p:message ... />
To update them, just use update="birthdateLabel birthdateInput".

Updating Primefaces datatable summary row using Ajax

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

Primefaces selectOneRadio(RadioButton) update panelGrid within Dialog

i m trying to update a panelgrid form selectOneRadio within a dialog.
Every time i chose on of the two options the whole panelGrid collapse and a NPE is thorw without any details.
My Sourcecode:
<h:form id="form_tmpVst">
<p:dialog id="dialog_tmpVst" header="Temporäre Verkaufsstelle" widgetVar="dialog_tmpVst" modal="true" resizable="false" showEffect="clip">
<p:selectOneRadio id="radio_placeOnMap" value="#{mapBean.placedByAddress}" layout="custom">
<f:selectItem itemLabel="Karte" itemValue="#{false}" />
<f:selectItem itemLabel="Adresse" itemValue="#{true}" />
<p:ajax update="panel_tmpVst" />
<!-- <p:ajax #process="#this" update="#this panelTempVst" /> -->
</p:selectOneRadio>
<p:panelGrid id="panel_tmpVst">
<p:row>
<p:column colspan="2">
<p:outputLabel value="Platzierung: " />
</p:column>
</p:row>
<p:row>
<p:column>
<p:radioButton id="radio_tmpVstPlaceByAddress" for="radio_placeOnMap" itemIndex="0" />
<p:outputLabel value="Karte" for="radio_tmpVstPlaceByAddress" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:radioButton id="radio_tmpVstPlaceByMap" for="radio_placeOnMap" itemIndex="1" />
<p:outputLabel value="Adresse" for="radio_tmpVstPlaceByMap" />
</p:column>
<p:column>
<p:inputTextarea id="txtarea_address" rows="5" cols="30" counter="txtarea_counter" maxlength="200" counterTemplate="{0} Zeichen übrig."
autoResize="false" value="test data __öäüöäöüöäö" required="#{mapBean.placedByAddress}" disabled=" #{!mapBean.placedByAddress}"
style="resize: none;" />
<br />
<h:outputText id="txtarea_counter" style="font-size: .5em;" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Name:" for="txt_tmpname" />
</p:column>
<p:column>
<p:inputText id="txt_tmpname" value="#{mapBean.tmpVstName}" required="true" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="BST:" for="txt_bsttmp" />
</p:column>
<p:column>
<p:inputText id="txt_bsttmp" value="#{mapBean.tmpDistrict}" required="true" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="VST:" for="txt_vsttmp" />
</p:column>
<p:column>
<p:inputText id="txt_vsttmp" value="#{mapBean.tmpVstNumber}" required="true" />
</p:column>
</p:row>
</p:panelGrid>
<br />
<p:commandButton value="Hinzufügen" id="btn_addTmpVst" action="#{mapBean.addTempVst()}" type="submit" ajax="true"
update=":dataTableForm:markerListDataTable, :mapForm:map, :growl" oncomplete="PF('dialog_tmpVst').hide();" />
</p:dialog>
</h:form>
Before:
After radio-button klick:
Many Thanks in advence
This is normal, basiclly you're updating the h:panelGrid which contains the p:radioButtons without a notice to the owner (p:selectOneRadio).
To solve this update the p:selectOneRadio alongside the h:panelGrid, that way the rendering would work as expected:
<p:ajax update="panel_tmpVst radio_placeOnMap" />

cannot update component from inside overlaypanel inside datatable primefaces

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?

Resources