primefaces rowEdit closes after validationFailed() - primefaces

I am using Primefaces 4.0 and JSF 2.2. When I make a DataTable with row Edit and I set a valdiationFailed() on the rowEdit event, the roweditor is closing, which I want to prevent.
I added an oncomplete js function like:
<p:ajax event="rowEdit" listener="#{customerUI.onInvoiceRowEdit}"
oncomplete="if(!args.validationFailed) {updateTable();}" update=":messages" />
My remote command is as follows:
<p:remoteCommand name="updateTable" update=":form:addressTabs:customerTable" />
So this keeps the editor when the validation fails, but now the editors accept and cancel buttons doesn't work, so does editing other things on the side until i do a manual refresh.
I just want the editor to stay when the validation fails and to correct the input, if the validation went good, the editor can be closed.
Anyone any solution to this?

So I had a tangentially related problem and this question helped me figure out a solution so I thought I should share it here in case someone else lands on this question with a similar issue and needs help.
So I had a dataTable and a rowEdit ajax call to a function when a cell within the row is edited, I also used a remoteCommand to update the dataTable after I make some changes in the DB. Problem was if the validation for the cell edit value failed the remoteCommand would refresh the form and the error messages would disappear before they could be read. I wanted the ajax call on rowEdit to only go through if there were no validation errors, otherwise I wanted to display the error message with the row editor still open. So I used the args.validationFailed parameter as shown in the question to prevent the remoteCommand from being executed in case the custom validator fails. The following is a basic example of what I did.
JSF page:-
<h:form id="form_name">
<p:remoteCommand name="refreshForm" update="#form" />
<p:dataTable id="table_id" var="varTableData"
value="#{bean.tablerows}"
editable="true">
<p:ajax event="rowEdit"
listener="#{bean.onRowEdit}"
oncomplete="if(!args.validationFailed) refreshForm()" />
<p:column>
<f:facet name="header">
<h:outputText value="Column Title" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{varTableData.someValue}" />
</f:facet>
<f:facet name="input">
<p:inputText id="cellId"
value="#{varTableData.someValue}"
label="Some Label" required="true" style="width:100%"
validator="#{bean.validationMethod}">
</p:inputText>
<p:message id="someMsg" for="cellId" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:form>
Custom Validation Method :-
public void validationMethod(FacesContext context, UIComponent comp, Object value) {
int someCellValue = (int) value;
if (someCellValue < 6) {
((UIInput) comp).setValid(false);
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR,
"Some error message",
"some error message");
context.addMessage(comp.getClientId(context), message);
}
}

Related

<p:autoComplete> inside cell editable <p:dataTable> not invoking complete method

I have a dataTable which has cell editing and global filter capability:
<p:dataTable id="tbl01" value="#{userMappingBacking.staffList}" editable="true" editMode="cell" filteredValue="#{userMappingBacking.staffListFiltered}" var="s" rowKey="#{s.id}" widgetVar="tbl101WV">
...
<f:facet name="header">
<p:outputPanel>
<p:toolbar>
<p:toolbarGroup align="${text.line_start}">
<p:commandButton value="#{text.save}" action="#{userMappingBacking.saveChanges}" update="msgs"/>
</p:toolbarGroup>
<p:toolbarGroup align="${text.line_end}">
<h:outputText value="#{text.search_all_fields}:"/>
<p:spacer width="10"/>
<h:inputText id="globalFilter" onkeyup="PF('tbl101WV').filter()" />
</p:toolbarGroup>
</p:toolbar>
</p:outputPanel>
</f:facet>
...
<p:column headerText="#{text.user}" filterBy="#{s.userName}" filterable="false">
<p:cellEditor id="ceUser">
<f:facet name="output"><h:outputText value="#{s.userName}"/></f:facet>
<f:facet name="input">
<p:autoComplete id="acUser" dropdown="true" value="#{s.userName}" completeMethod="#{userMappingBacking.completeUnAssignedUser}"/>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
and the backing bean userMappingBacking supports all the methods and works fine.
My problem is quite strange, the <p:autoComplete id="acUser"... doesn't invoke the complete method unless a filter is applied to the table, after a filter application every thing works fine, but before that no values are completed in the p:autoComplete.
Could any one help or give an insight into this.
I actually found the problem to be in the backing bean, I had 3 lists:
staffList = new ArrayList<>();
staffListFiltered = new ArrayList<>();
userDTOList = new ArrayList<>();
that I fill in a viewAction listener
public void loadStaffListAction() {
staffList = zaties.listAllStaff();
staffListFiltered = zaties.listAllStaff();
userDTOList = iacw.listAllUsers();
}
the problem was having 2 different lists staffList and staffListFiltered filled with different objects from the service, so changing the code like this:
public void loadStaffListAction() {
staffList = zaties.listAllStaff();
staffListFiltered = staffList;
userDTOList = iacw.listAllUsers();
}
and this solved the problem, nevertheless this is not the best practice, as explained below.
Common Error:
in the primefaces showcase for filtered datatable the never initialize the filteredValue list to any thing, they leave it as null so the datatable filter logic initialize it in the right way, paying attention to this detail I advise:
Don't initialize any thing unless you get an error.
comments are welcome!

p:datatable filter: cannot validate component with empty value

Is there a way to filter a p:datatable column by clicking on the text inside and making this text the filter ?
In other words, if I click on a session ID, I would like the datatable to filter this column by the clicked ID, as if I had entered it manually in the filter above ?
I am using Primefaces 6
UPDATE
This is my complete Datatable with the suggested solution:
<p:dataTable id="tablealltx" var="transaction" value="#{pastTxModel.txList}" paginator="true" rows="20" sortBy="#{transaction.createdDate}" sortOrder="descending" resizableColumns="true">
<p:column filterBy="#{transaction.session}" filterMatchMode="contains">
<f:facet name="filter">
<p:inputText id="myFilter" value="#{transactionXmlController.currentFilter}" onchange="PF('alltxform').filter()" />
</f:facet>
<p:outputLabel value="#{transaction.session}" ondblclick="document.getElementById('alltxform:tablealltx:myFilter').value = this.innerText;PF('tablealltx').filter()" >
</p:column>
</p:dataTable>
When I double click on the session, the value is entered in the filter text box, but the filtering itself does not work. Nothing happens.
I am using TomEE 7.0.1
Solution
Copy Paste from Jasper:
The data table in your question doesn't have a widgetVar set to
tablealltx, so PF('tablealltx').filter() will fail. You can test it by
entering PF('tablealltx') in your browser's JavaScript console.
I was able to achieve this by setting widgetVar="myTable" to the data table, using a custom filter field, replacing the cell contents with p:outputLabel (which has ondblclick) and JavaScript it all together:
<p:column headerText="Session" filterBy="#{transaction.session}" ...>
<f:facet name="filter">
<p:inputText id="myFilter"
value="#{myBean.myFilter}"
onchange="PF('myTable').filter()"/>
</f:facet>
<p:outputLabel value="#{transaction.session}"
ondblclick="document.getElementById('myForm:myTable:myFilter').value = this.innerText;PF('myTable').filter()"/>
</p:column>
For better readability, here's the ondblclick:
var filterId = 'myForm:myTable:myFilter';
document.getElementById(filterId).value = this.innerText;
PF('myTable').filter();
You could replace p:outputLabel with a simple h:outputText, but in that case (assuming you are on JSF 2.2+) you need to add the namespace xmlns:a="http://xmlns.jcp.org/jsf/passthrough". Now you can use:
<h:outputText value="#{transaction.session}"
a:ondblclick="..."/>
See also:
Custom HTML tag attributes are not rendered by JSF

PrimeFaces DataTable doesn't refresh on deleting a row

Currently using primefaces 3.3 and want to refresh the datatable on removing an item from the list.
When I refresh the page, do see updated table, so the list is getting updated in java code.
Thanks for your time and help.
Please let me know where I am misktaken.
Here's the relevant code:
//in xhtml
<p:dataTable id="userConnections" var="connection" value="#{loginBean.userConnectionEmailList}">
<p:column>
<h:outputText value="#{connection.email}" />
</p:column>
<p:column>
<p:commandButton id="deleteButton" icon="ui-icon-close" title="Delete" process="#this" action="#{loginBean.deleteConnectionAction}" update="userConnections">
<f:setPropertyActionListener value="#{connection}" target="#{loginBean.selectedUserConnection}"/>
</p:commandButton>
</p:column>
</p:dataTable>
// java code
public String deleteConnectionAction() {
System.out.println("###deleteConnectionAction ###" + selectedUserConnection.getEmail() );
userConnectionEmailList.remove(selectedUserConnection);
return "";
}

How to update specific row in Primefaces datatable

Primefaces 3.5, Mojarra 2.1.14. This is my PF datatable, it contains one non-editable boolean column named 'automatic', and editable 'label' column:
<p:dataTable value="#{bean.contents}" paginator="true" var="row"
editable="true" editMode="cell" rows="25" rowsPerPageTemplate="10,25,50" id="list">
<p:column>
<f:facet name="header"><h:outputText value="header1" /></f:facet>
<p:selectBooleanCheckbox value="#{row.automatic}" disabled="true" id="isAutomatic"></p:selectBooleanCheckbox>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="header2" /></f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{row.label}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{row.label}"></p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:ajax event="cellEdit" process="#this" listener="#{myBean.onEditLabel}" update="isAutomatic"/>
</p:dataTable>
Cell edit event listener:
public void onEditLabel(CellEditEvent event) {
Object oldValue = event.getOldValue();
Object newValue = event.getNewValue();
if(newValue != null && !newValue.equals(oldValue)) {
DataTable s = (DataTable) event.getSource();
MyEntity d = (MyEntity) s.getRowData();
try {
d.setAutomatic(false);
myDAO.save(d);
addMessage("Change saved!");
} catch (Exception ex) {
addErrorMessage("Label could not be saved!");
getFacesContext().validationFailed();
}
}
}
The cell editor works, sends data to listener, and it is correctly persisted to the database. The 'automatic' flag is also cleared by cell edit event listener, and gets correctly persisted to the database. The problem is that 'automatic' checkbox is not updated on the client.
I also tried
<p:ajax event="cellEdit" process="#this" listener="#{myBean.onEditLabel}" update="list"/>
which correctly updated the checkbox, but also causes focus to be lost, and wastes bandwidth.
How can I update just a specific cell after cellEdit event is fired?
You p:ajax tag is inside p:dataTable no in some specific row or column, so you cent so easy update some relative component id. You can with help of RequestContext update specific component in cell. So, remove update from p:ajax and add this to your onEditLabel method:
RequestContext.getCurrentInstance().update(
s.getClientId(FacesContext.getCurrentInstance()) +
":" + event.getRowIndex() +
":isAutomatic"
);
As you can see, id of component inside cell has row number before id you assigned.
I believe you can solve this without having to know the details of the ID of the component you wish to update. You can pass it as a parameter to the bean.
First, bind the component you wish to update. You don't actual need a bean to which this component is bound to. You just need to define some value which you can use to identify this component later in your JSF. So in your case, you would do something like:
<p:selectBooleanCheckbox binding="#{isAutomaticComponent}" value="#{row.automatic}" disabled="true" id="isAutomatic"></p:selectBooleanCheckbox>
Now access the component when you do your update. ie:
<p:ajax event="cellEdit" process="#this" listener="#{myBean.onEditLabel(isAutomaticComponent.clientId)}" />
Now you can update the component from your cellEdit event method without knowing the contents of the ID. ie:
public void onEditLabel(CellEditEvent event, String idOfComponentToUpdate) {
...
RequestContext.getCurrentInstance().update(idOfComponentToUpdate);
...

primefaces rowediting datatable ejb update returns old data

Salut :), iam a newbie in primefaces and ajax
Iam using primefaces 3.4, glassfish 3.1, jsf2.0 and ejb 3. I tried to implement primefaces showcase datatable rowediting. But when i validate the updated value into the datatable, i get the old value. This is my code :
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable var="item" value="#{jSFMBean.allContacts}" id="contactList" editable="true">
<p:ajax event="rowEdit" listener="#{jSFMBean.onEdit}" update="#this :form:messages" />
<p:ajax event="rowEditCancel" listener="#{jSFMBean.onCancel}" update=":form:messages" />
<p:column headerText="EMAIL" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{item.email}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{item.email}" label="EMAIL"/>
</f:facet>
</p:cellEditor>
</p:column><p:column headerText="Options" style="width:50px">
<p:rowEditor />
</p:column>
</p:dataTable>
<h:outputText value="#{jSFMBean.selectedContact.displayname}" />
the methods are :
public void onEdit(RowEditEvent event) {
this.session.updateContact((Contacts) event.getObject());
FacesMessage msg = new FacesMessage("Edition contact: ", ((Contacts) event.getObject()).getDisplayname());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
(Contacts) event.getObject() always get the old value :(. It's like the getter of the datatable fireup first before ajax update to the database.
what iam i doing wrong ? thank you for your help solving this .
Currently you're editing values within the object. It looks like you still need to make a call back to your database to update the value there.
It seems that whenever you need your dataTable you are getting it from your database and that's why event.getObject() always returns the old value.So in the getter of your datatable you need to add:
if (allContacts== null){
allContacts= (List<Contacts>) yourservice.getAll(); /*this refers to the function that get the list from the database*/
}
return allContacts;
I hope that may help you.
Most probably the problem is with your backing bean. if you have used #Named annotation instead of #ManagedBean (javax.faces.bean.ManagedBean) for your backing bean, you faces this kind of problems. Simply replace
#Named (value="YourBeanName")
with
#ManagedBean (name="YourBeanName")