update primefaces or jsf view after ajax call on submit button - jsf

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.

Related

primefaces rowexpansion not updated

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.

p:dataTable p:ajax rowSelect rowUnselect listeners not invoked

I have this code in my view, but I can't invoke listener method when selecting any row. Each event points to a method that only prints a text in the console so I make sure it works, but it doesn't. I'm wondering if I'm missing something?
<p:panelGrid columns="2">
<p:column>
<h:form id="formSelectEmployee">
<p:dataTable
id="employeeDataTable"
var="employee"
value="#{employeeController.employeeList}"
selectionMode="single"
selection="#{employeeController.selectedEmployee}"
rowKey="#{employee.id}">
<p:ajax event="rowSelect" listener="#{employeeController.selectEmployee}" update=":tabs" />
<p:ajax event="rowUnselect" listener="#{employeeController.unSelectEmployee}" update=":tabs" />
<p:column>
<h:outputText value="#{employee.fullName}" />
</p:column>
</p:dataTable>
</h:form>
</p:column>
</p:panelGrid>
Adding
<p:commandLink action="#{employeeController.selectEmployee(employee)}">
<h:outputText value="#{employee.fullName}" />
</p:commandLink>
Did the same as rowSelect event =)

JSF commandButton issue

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

Primefaces cant fill inputText in dialog after click contextmenu

I'm using Primefaces Datatable-ContextMenu and Dialog to update a row (When after click to contextmenu it opens a dialog which contains will update object's fields in <p:inputext />).
I have tried dynamic true, initilazing object on constructor because when page is rendered selectedObject will be null in dialog and when I tried to use it gives null pointer exception so that i need other advices.
Here is ContextMenu:
<p:contextMenu for="functions" id="functionContextMenu">
<p:menuitem value="Guncelle" icon="ui-icon-" update="updateDialog" oncomplete="updateDialog.show()"/>
And my dialog is here:
<p:dialog header="Guncelle" widgetVar="updateDialog" resizable="false"
width="200" showEffect="clip" hideEffect="fold" id="updateDialog" dynamic="true">
<h:panelGroup id="display">
<h:outputText value="#{functionControllerBean.selectedFunction.functionName}" />
<h:inputText id="firstName" value="{functionControllerBean.tempSelectedFunction1.functionName}" />
</h:panelGroup>
</p:dialog>
If I dont use <p:inputText /> its ok and show what i put <h:outputText /> but when i put p:inputext inside of dialog;it doesnt show output text value and shows <p:inputText /> empty even its not.
I had used beanname.objectname.field before inside of <p:inputText /> or <h:inputText /> but there was no problem but now it's not working.
And here is my ManagedBean :
#ManagedBean
#RequestScoped
public class FunctionControllerBean implements Serializable {
private EfaFunctions willAddFunction;
private EfaFunctions selectedFunction = new EfaFunctions();
Thanks in advance
UPDATE Here is page
<h:form id="form">
<p:contextMenu for="functions" id="functionContextMenu">
<p:menuitem value="Guncelle" icon="ui-icon-" update="updateDialog" oncomplete="updateDialog.show()"/>
<p:menuitem value="Sil" update="#form" icon="ui-icon-close" actionListener="#{functionControllerBean.deleteFunction}"/>
</p:contextMenu>
<p:dataTable resizableColumns="true" id="functions" var="function" value="#{functionControllerBean.functions}" rowKey="#{function.functionId}"
selection="#{functionControllerBean.selectedFunction}" selectionMode="single">
<p:column headerText="Id">
#{function.functionId}
</p:column>
<p:column headerText="Key ">
#{function.functionKey}
</p:column>
<p:column headerText="Isim" >
#{function.functionName}
</p:column>
<p:column headerText="Tip" >
#{function.functionType}
</p:column>
<p:column headerText="Url" >
#{function.uri}
</p:column>
<p:column headerText="Olusturulma Tarihi" >
#{function.creationDate}
</p:column>
<p:column headerText="Guncelleme Tarihi" >
#{function.lastUpdateDate}
</p:column>
<p:column headerText="Olusturan Kisi" >
#{function.createdBy}
</p:column>
<p:column headerText="Guncelleyen Kisi" >
#{function.createdBy}
</p:column>
</p:dataTable>
<p:dialog header="Islem Sonucu" widgetVar="actionResult" resizable="false"
width="200" showEffect="clip" hideEffect="fold" id="actionResult"
visible="#{functionControllerBean.actionResult!=null}">
<h:outputText value="#{functionControllerBean.actionResult}"/>
</p:dialog>
<p:dialog header="Guncelle" widgetVar="updateDialog" resizable="false"
width="200" showEffect="clip" hideEffect="fold" id="updateDialog" >
<h:panelGroup id="display">
<h:outputText value="#{functionControllerBean.selectedFunction.functionName}" />
<p:inputText value="#{functionControllerBean.selectedFunction.functionName}"/>
</h:panelGroup>
</p:dialog>
</h:form>

primefaces growl redisplays previous message

I have a form which contains a list in a datatable. To add a New record to the list, click "Add" and the dialog box <p:dialog> appears, in that any empty datatable with 2 columns having two input text boxes to fill. In the dialog box I have Save and Cancel buttons. Once we click on Save button, a new record should saved into the database and the list in the form should show with the new record. The datatable is of primefaces inline row editing functionality. I'm using growl to display the error messages. Once I update my record with empty data, it shows the required message. But when I click on the Add button, it is again showing the same required message. It is showing the previous error. I don't want to have that. Could anyone help me in this context. The "Add" is an ajax request.
<h:body>
<ui:composition template="/WEB-INF/facelets/template/adminLayout.xhtml">
<ui:define name="view">
<h:form id="myForm" prependId="false">
<div class="header" >
<div class="titleColor">
T_COD_Prefil
</div>
</div>
<div class="divPosition">
<p:dataTable var="profile" id="profileTable" value="#{profileView.profileModelList}" rowEditListener="#{profileView.rowEditListener}" onRowEditUpdate="buttonPanel" >
<p:column style="width:60px;">
<p:rowEditor/>
<h:commandButton style="padding-left:5px;" image="/resources/images/delete.jpeg" styleClass="spa" value="delete" immediate="true" actionListener="#{profileView.delete}" >
<f:attribute name="delteProfile" value="#{profile}" />
</h:commandButton>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="IDprefil" />
</f:facet>
<h:outputText value="#{profile.profileId}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="description" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{profile.profileDescription}" />
</f:facet>
<f:facet name="input">
<h:inputText required="true" requiredMessage="#{msg.desProfileEmpty}" maxlength="255" value="#{profile.profileDescription}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</div>
<div class="divButPosition">
<h:panelGroup id="buttonPanel">
<p:commandButton id="buttons" value="Add" actionListener="#{profileView.addEmptyProfile}"
async="true" update="myForm" rendered="#{!profileView.addNewRow}" oncomplete="profileDialog.show();" />
</h:panelGroup>
</div>
<p:growl id="growl" showDetail="false" />
<p:dialog id="profileDialog" header="Profile Detail" prependId="false" widgetVar="profileDialog" resizable="false" width="500" showEffect="explode" hideEffect="explode" modal="false" closable="false">
<h:dataTable var="newProfile" value="#{profileView.newProfile}">
<h:column>
<f:facet name="header">
<h:outputText value="IDprefil" />
</f:facet>
<h:inputText value="#{newProfile.profileId}" required="true" requiredMessage="not empty" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="description" />
</f:facet>
<h:inputText value="#{newProfile.profileDescription}" required="true" requiredMessage="Desctiption should not be empty" />
</h:column>
</h:dataTable>
<p:commandButton value="Save" actionListener="#{profileView.saveProfile}" async="true" update="growl,buttonPanel,profileTable" oncomplete="handleRequest(args ,document.getElementById('profileDialog'))" />
<p:commandButton value="Cancel" immediate="true" update="buttonPanel" async="true" actionListener="#{profileView.cancelProfile}" oncomplete="profileDialog.hide();" />
</p:dialog>
</h:form>
Try writing your growl at the top of the code, and update it when clicking on the button.
Well, doesn't work on IE8.
After submit button click, all fields will be validated first so, if some of them empty then requried message will be popup. So keep submit related data under different tag. Basically different forms for different submit buttons

Resources