I have an issue with primefaces to update a dataTable. The problem is, that after submiting the "change" button, the datatabel is not updated - not with ajax=false, not with update=... . Maybe anyone has an idea?
Note: button and datatable are in two different forms, but should not be a problem, works for another case in my project. And userOrders are loaded lazily, but i logged the list in bean, the data is correctly available.
<h:form rendered="#{orderModel.positions.size() > 0}">
<p:commandButton icon="fa fa-edit" value="change" update=":table:orderDT, temp" action="#{orderModel.editOrder()}" rendered="#{orderModel.posChecked and orderModel.orderEditable}"/>
</h:form>
<h:form id="table" >
<p:dataTable id="orderDT" rendered="#{orderModel.user.orders.size() > 0}" reflow="true" var="order" value="#{orderModel.userOrders}" selection="#{orderModel.tempOrder}" selectionMode="single" rowKey="#{order.id}" scrollable="true" style="margin: 20px">
<p:ajax event="rowSelect" update=":table" listener="#{orderModel.onRowSelected}"/>
<f:facet name="header">
Getätigte Bestellungen
</f:facet>
<p:column style="width:16px">
<p:rowToggler/>
</p:column>
<p:column headerText="Bestellnummer">
<h:outputText value="#{order.id}"/>
</p:column>
<p:rowExpansion>
<p:dataTable id="exp" var="pos" value="#{order.orderPositions}" reflow="true">
<p:column headerText="Anzahl">
<h:outputText value="#{pos.quantity}"/>
</p:column>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
</h:form>
Solved it on my own: I adapted the rendered="#{orderModel.user.orders.size() > 0} to rendered="#{orderModel.userOrders.size() > 0} and added lazyLoading. Probbaly the first would be enough, but I think the accessed fields should be the same.
Related
I'm doing project in primefaces. I included the data table and sort order. when I click the icon it will not working.
I tried the below code:
<p:dataTable var="car" value="#{dtSortView.cars1}">
<p:column headerText="Id" sortBy="#{car.id}">
<h:outputText value="#{car.id}" />
</p:column>
</p:dataTable>
You need to wrap your p:dataTable inside h:form tag.
<h:form id="carForm">
<p:dataTable var="car" value="#{dtSortView.cars1}">
<p:column headerText="Id" sortBy="#{car.id}">
<h:outputText value="#{car.id}" />
</p:column>
</p:dataTable>
</h:form>
You can check this from here .
Hope it helps.
I need explanation for the below value binding in the outputText inside p:dialog .I dont clear with that and is there any other way.
In my sample :
I have tried ,if i select the single or many check box the value get binded but when I click root check box which used for selecting all the check boxes, its getting selected but the values not get stored in the back end.
<p:dataTable id="checkboxDT"
var="car"
value="#{dtSelectionView.cars6}"
selection="#{dtSelectionView.selectedCars}"
rowKey="#{car.id}"
style="margin-bottom:0">
<f:facet name="header">
Checkbox
</f:facet>
<p:column selectionMode="multiple"
style="width:16px;text-align:center"/>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<f:facet name="footer">
<p:commandButton process="checkboxDT"
update=":form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
</f:facet>
</p:dataTable>
<p:dialog header="Selected Cars"
widgetVar="multiCarDialog"
modal="true"
showEffect="fade"
hideEffect="fade"
resizable="false"
width="200">
<p:outputPanel id="multiCarDetail" style="text-align:center;">
<ui:repeat value="#{dtSelectionView.selectedCars}"
var="car">
<h:outputText value="#{car.id} - #{car.brand}"
style="display:block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
You should update checkboxDT because update is used to determines id’s of components to be updated (refreshed with updated values from server). If you do not update checkboxDT, the selectedCars do not update too.
<p:commandButton process="checkboxDT"
update="checkboxDT,:form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
I am providing a search function using JSF. I get the list and display it correctly in a datatable :
<p:dataTable id="props" var="prop" value="#{propController.propSearch}" editable="true" style="margin-bottom:20px">
<p:column headerText="Id" width="20">
<h:outputText value="#{prop.id}" />
</p:column>
<p:column headerText="Name" width="300">
<h:outputText value="#{prop.name}"/>
</p:column>
<p:column headerText="Description">
<h:outputText value="#{prop.shortDescription}" />
</p:column>
<p:column headerText="Price" width="120">
<h:outputText value="#{prop.price}" />
</p:column>
<p:column width="120">
<h:commandButton value="View Prop" immediate="true" action="#{propController.viewSingleProp(prop)}" />
</p:column>
<p:column width="120">
<h:commandButton value="Delete" immediate="true" onclick="return confirm('Are you sure you want to delete this prop?')" actionListener="#{propController.deleteProp(prop)}" />
</p:column>
</p:dataTable>
</h:form>
However the commandButton to view each individual item does not get called. Instead the search page just refreshes with no data.
Why is this happening?
(I hope your opening tag of <h:form> is just missing in your code posted in your question, not in your actual code!)
You need to remove the attribute immediate="true" from the h:commandButton.
See:
Immediate=true VS immediate=false in JSF Component
I am trying to update a primefaces form (wizard-first step) after an ajax command button request with no success. The command button that makes the actual ajax call is on a dialog. I would like after submitting the request to force my view to refresh.
The command button deletes a record from a datatable. It works fine, record is deleted but when dialog is hidden the datatable keeps displaying the deleted record. I would like to force it somehow to refresh. Any ideas? Could I do it from my backing bean reviewManagerBean.deleteProtocol() method?
Here is the code (my BackBean is viewScoped):
<h:form id="reviewManagerForm">
...
<pe:masterDetail id="masterDetail" level="#{reviewManagerBean.currentLevel}" showBreadcrumb="false" selectLevelListener="#{reviewManagerBean.levelListener}" >
<f:facet name="header" >
<h:panelGroup layout="block" style="margin-top: 10px;" >
<h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all wizard-breadcrumbs#{reviewManagerBean.currentLevel eq 1 ? 'ui-state-hover' : ''}">
<h:outputText value="1: Protocol picker"/>
</h:panelGroup>
...
<p:messages id="mainMessagesPanel" showDetail="true" closable="true" />
</h:panelGroup>
</f:facet>
<pe:masterDetailLevel level="1">
<p:panel id="panel1" header="List of available protocols">
<p:dataTable id="protocolsDataTable" var="cRProtocol" rowKey="#{cRProtocol.revProtId}" value="#{reviewManagerBean.cRReviewProtocolList}"
widgetVar="protocolsTable"
...
selection="#{reviewManagerBean.selectedReviewProtocol}"
selectionMode="single" >
...
<p:ajax event="rowSelect" listener="#{reviewManagerBean.setSelectedRow}" />
<p:ajax event="rowUnselect" listener="#{reviewManagerBean.unsetSelectedRow}"/>
...
<p:column sortBy="#{cRProtocol.revProtTitle}" headerText="Title" style="width:200px;text-align:center;">
<h:outputText value="#{cRProtocol.revProtTitle}" />
</p:column>
...
<p:column>
<p:commandButton value="Delete" onclick="dlg5.show()"
update=":reviewManagerForm:deleteSingleProtocol"
disabled="#{reviewManagerBean.checkifProtocolIsOpen(cRProtocol)}"
ajax="true" process=":reviewManagerForm:deleteSingleProtocol" />
</p:column>
</p:dataTable>
</p:panel>
...
<p:dialog id="dialog-deleteprotocol" header="Delete Image Type" widgetVar="dlg5" dynamic="true" modal="true" resizable="false">
<p:panelGrid id="deleteSingleProtocol">
<p:row>
<p:column>
<h:outputText value="Id:" style="font-weight:bold; padding-right:10px" />
</p:column>
<p:column>
<h:outputText value="#{reviewManagerBean.selectedReviewProtocol.revProtId}" />
</p:column>
</p:row>
...
<p:column>
<p:commandButton id='protocolDelete'
value='Delete'
action='#{reviewManagerBean.deleteProtocol()}'
ajax="true"
onclick="dlg5.hide()" icon="ui-icon-disk"
update=":reviewManagerForm:protocolsDataTable"
process=":reviewManagerForm:deleteSingleProtocol" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
Your datatable should be re-rendered properly, you would have gotten an exception otherwise (something like component with id :reviewManagerForm:protocolsDataTable could not be found).
This means that #{reviewManagerBean.cRReviewProtocolList} will get called again. You need to remove the item from that list. This is appropriately done from #{reviewManagerBean.deleteProtocol}.
When #{reviewManagerBean.cRReviewProtocolList} is called after the removal, your datatable will get updated.
I tried to make a <p:dataTable> with <p:contextMenu> using primefaces 3.5 on Mojarra 2.2.1.
The ContextMenu Code :
<p:contextMenu for="actionnairesDT">
<p:menuitem value="View" update="displayActionnaires" icon="ui-icon-search" oncomplete="actDialog.show()"/>
<p:menuitem value="Delete" update="actionnairesDT" icon="ui-icon-close" />
</p:contextMenu>
the problem is that the dialog box is displayed empty.
I tried to show my object in the setter setSelecedActionnaire(), it displays nothing
not even null.
public void setSelectedActionnaire(Actionnaires selectedActionnaire) {
System.out.println(selectedActionnaire);
this.selectedActionnaire = selectedActionnaire;
}
<p:dataTable> and <p:dialog> code is below. thank you in advance for your help !
<p:dataTable id="actionnairesDT" paginatorPosition="bottom"
pageLinks="10" paginator="true" rows="20" value="#{actionnairesBean.actionnairesList()}" var="actionnaires"
rowKey="#{actionnaires.nomAct}" selection="#{actionnairesBean.selectedActionnaire}" selectionMode="single"
>
<p:ajax event="rowSelect" update="actionnairesDT" oncomplete="actDialog.show()" />
<p:column sortBy="#{actionnaires.actionnairesPK.codeAct}" headerText="N°">
#{actionnaires.actionnairesPK.codeAct}
</p:column>
<p:column headerText="Nom" sortBy="#{actionnaires.nomAct}">
#{actionnaires.nomAct}
</p:column>
<p:column>
#{actionnaires.quatiteAct}
</p:column>
<p:column headerText="Sicav">
#{actionnaires.actionnairesPK.codeSicav}
</p:column>
</p:dataTable>
<p:dialog header="Détail Actionnaire" widgetVar="actDialog" resizable="false"
showEffect="clip" hideEffect="fold" id="actDialog" closable="true" modal="true">
<h:panelGrid id="displayActionnaires" columns="2" cellpadding="4">
<h:outputText value="Nom Actionnaire"/>
<h:outputText value="#{actionnairesBean.selectedActionnaire.nomAct}"/>
<h:outputText value="Quantité"/>
<h:outputText value="#{actionnairesBean.selectedActionnaire.quatiteAct}"/>
<h:outputText value="Sicav"/>
<h:outputText value="#{actionnairesBean.selectedActionnaire.sicavs.libelleSicav}"/>
</h:panelGrid>
</p:dialog>
In the end, I found the solution
I add <p:ajax> to the <p:dataTable>:
<p:ajax event="contextMenu"/>