In Cell editing does not update value on focus change - primefaces

Cell value is not captured when mouse focus changes
I have a simple datatable that shows the name and income. The cell values are editable. When I update the cell value with a different value and hit "Update" (basically change mouse focus) the new value is not captured. The update method
prints the old value. However, when I press the "tab" key I can see the updated values printed. I am not sure what I am missing
Here is my backing bean:
#PostConstruct
public void init() {
NVPair nvp = new NVPair("xx", 10000);
dataList.add(nvp);
nvp = new NVPair("yy", 20000);
dataList.add(nvp);
}
public void update() {
for (NVPair item : dataList) {
System.out.println("Name: " + item.getName() + " Value: " +
item.getValue());
}
}
Here is the view:
<h:form>
<p:dataTable id="testTable" value="#{testBean.dataList}" var="item"
editable="true" editMode="cell">
<p:ajax event="cellEdit" listener="#{testBean.onCellEdit}"
immediate="true" update="testTable" />
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{item.name}" />
</f:facet>
<f:facet name="input">
<h:outputText value="#{item.name}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Income">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{item.value}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{item.value}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:commandButton action="#{testBean.update}" value="Update" />
</h:form>
When the focus changes, I am expecting that the edited value is captured just like when the tab key is pressed.

Related

Primefaces Drag&Drop drags and drops only one element from dataTable

So, I've used example from showcase of PrimeFaces https://www.primefaces.org/showcase/ui/dnd/dataTable.xhtml. That's my code:
<div class="page_content">
<div class="header">Очередь рассылок</div>
<script type="text/javascript">
function handleDrop(event, ui) {
var droppedEmail = ui.draggable;
droppedEmail.fadeOut('fast');
}
</script>
<h:form>
<p:fieldset id="availableEmailsField" legend="Доступные рассылки">
<p:dataTable id="availableEmails" var="email" value="#{emailingQueueUI.customEmails}">
<p:column style="width: 20px;">
<h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4"/>
<p:draggable for="dragIcon" revert="true" helper="clone"/>
</p:column>
<p:column headerText="ID">
<h:outputText value="#{email.id}"/>
</p:column>
<p:column headerText="Название">
<h:outputText value="#{email.name}"/>
</p:column>
<p:column headerText="Заголовок">
<h:outputText value="#{email.header}"/>
</p:column>
<p:column headerText="Количество порции">
<h:outputText value="#{email.chunkSize}"/>
</p:column>
</p:dataTable>
</p:fieldset>
<p:outputPanel id="selectedEmailsField">
<p:outputPanel id="dropArea">
<h:outputText value="Переместите сюда c доступных рассылок" rendered="#{empty emailingQueueUI.customEmailQueue}" style="font-size:16px;" />
<p:dataTable id="selectedEmails" var="email" value="#{emailingQueueUI.customEmailQueue}" rendered="#{not empty emailingQueueUI.customEmailQueue}"
rowIndexVar="index">
<!--<p:ajax event="rowReorder" listener="#{emailingQueueUI.onQueueReorder}" update=":form" />-->
<p:column headerText="Номер в очереди">
<h:outputText value="#{index}"/>
</p:column>
<p:column headerText="Рассылка">
<h:outputText value="#{email.id}"/>
</p:column>
<p:column headerText="Название">
<h:outputText value="#{email.name}"/>
</p:column>
<p:column headerText="Заголовок">
<h:outputText value="#{email.header}"/>
</p:column>
<p:column headerText="Количество порции">
<h:outputText value="#{email.chunkSize}"/>
</p:column>
</p:dataTable>
</p:outputPanel>
</p:outputPanel>
<p:droppable for="selectedEmailsField" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableEmails" onDrop="handleDrop">
<p:ajax listener="#{emailingQueueUI.onEmailDrop}" update="dropArea availableEmails" />
</p:droppable>
</h:form>
</div>
There is a problem with d&d, I can drag and drop only one element from "availableEmailsField". When I try to drop another element it removes previous element and adds the dropped one.
I think the problem is in your bean.
Make sure that you initialize customEmailQueue inside #PostConstruct method and use the proper bean scope. In this case #ViewScoped.
It seems that an update function must be setted correctly in order to work properly. I faced the same issue and discovered that the ajax inside dropable has to update all drag-drop area elements, it seems that this action solves the issue.
The solution that worked is to put inside your form an:
<h:panelGroup id="elementsPanel">
....
...
...
...
....
</h:panelGroup>
, surrounding all drag-drop elements (if you dont want a panelgroup the idea is to update all the components)
and on the dropable update this panel:
<p:droppable id="dropHandler" for="selectedTable" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="myDataSource" onDrop="handleDrop">
<p:ajax listener="#{dimensionsClass.onDimensionDrop2}" update="elementsPanel" />
</p:droppable>
I hope that helps!

PrimeFaces <p:cellEditor> not changing value of variable

I've done some research and haven't been able to find anything that directly addresses the problem I've been having.
I have a DataTable column that is editable (by cell) and I have the ability to click on the cell, enter a new number in the cell editor box, but when I hit the cell editor closes but does not save the new value (same thing happens if you just click off and don't hit enter).
Here is the Code Snippet
<h:form>
<c:forEach items="#{extensionsBean.getPhases()}" var="phase">
<p:fieldset legend="#{phase.getPhaseName()}">
<p:dataTable value="#{extensionsBean.getActivities(phase)}" var="activity" editable="true" editMode="cell">
<p:column>
<f:facet name="header">
<h:outputText value="Actual Hours"/>
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{activity.getEstimateDetail().actualHours}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{activity.getEstimateDetail().actualHours}" />
</f:facet>
</p:cellEditor>
//the rest of the closing tags are present
Any suggestions would be great! For the record, I have basically the exact same setup in a different xhtml page and I'm able to edit each of the cells without a problem. Not sure what's causing this one to bug out on me.
Add Ajax event cellEdit and store the values
Add ajax event celledit and where do you want save the value you can save it.
Code is below in my project
Xhtml page(Primefaces):
<p:dataTable var="my" value="#{java.custom_info}" editMode="cell" editable="true" style="font-size: 12px">
<p:ajax event="cellEdit" listener="#{java.custom_detail}"/>
<p:column style="background: white">
<h:outputText value="First Name"/>
</p:column>
<p:column style="background: white">
<p:cellEditor>
<f:facet name="output"> <h:outputText value="#{my.first}"/> </f:facet>
<f:facet name="input"><p:inputText value="#{my.first}" placeholder="Enter First Name" style="width:93%"/></f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
Java Class
public void custom_detail(CellEditEvent event){
String old_str = (String) event.getOldValue();
String first_name = (String) event.getNewValue();
System.out.println("update method reached..."+first_name);
FacesContext fc = FacesContext.getCurrentInstance();
HttpSession session = (HttpSession) fc.getExternalContext().getSession(false);
Query db = new Query();
Customer bean = new Customer();
if(session!=null){
if(((String)session.getAttribute("login"))!=null){
Calendar currentDate=Calendar.getInstance();
SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String datenow=format.format(currentDate.getTime());
session.setAttribute("firstname", first_name);
session.setAttribute("modified_date",datenow);
bean.setFirst(first_name);
bean.setUsrid((String)session.getAttribute("user"));
bean.setUsr_modified(datenow);
db.update_personalinfo(bean);
}
}
}

Primefaces ActionListener not fired if h:inputHidden in the datatable

I am using Primefaces 5.1 and have this strange behaviour.
If in my dataTable I have h:inputHidden then mymethod() is not fired.
The method is fired if I remove it.
<p:dataTable id="tablerisorse" value="#{myBean.resources}" var="resource"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'oddRow' : 'evenRow'}"
rowIndexVar="rowIndex"
emptyMessage="Empty" headerClass="header">
<p:column>
<h:inputHidden id="id_user" value="#{resource.user}"/>
<f:facet name="header">
<h:outputText value="Surname"/>
</f:facet>
<h:outputText value="#{resource.surname}" />
</p:column>
<p:column>
<p:commandLink id="linkdet" actionListener="#{myBean.mymethod}" ajax="false"onstart="progressbar()" oncomplete="hideprogressbar()">
<p:graphicImage value="images/res.png" style="{border: 0}"></p:graphicImage>
</p:commandLink>
</p:column>
</p:dataTable>
the method is:
public void impegnirisorsa(ActionEvent ae) {
// TODO Auto-generated method stub
HtmlInputHidden uicid_user = (HtmlInputHidden) ae.getComponent().findComponent("id_user");
String id_user = ""+uicid_user .getValue();
System.out.println("id_user"+id_user);
}
I wonder what the problem could be and which workarounds could I use.

Primefaces datatable not editing

I'm trying to make editable primefaces datatable. I'm using http://www.primefaces.org/showcase/ui/datatableRowEditing.jsf. All database table data showing up, but then I trying to edit data in a table I'm getting following error:
/index.xhtml #23,90 listener="#{tableBean.onEdit}": Target Unreachable, identifier 'tableBean' resolved to null: javax.el.PropertyNotFoundException: /index.xhtml #23,90 listener="#{tableBean.onEdit}": Target Unreachable, identifier 'tableBean' resolved to null
index.xhtml
<h:head>
<title>index.xhtml</title>
</h:head>
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable var="u" value="#{logonTest.userList}" id="carList" editable="true">
<f:facet name="header">
In-Cell Editing
</f:facet>
<p:ajax event="rowEdit" listener="#{tableBean.onEdit}" update=":form:messages" />
<p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}" update=":form:messages" />
<p:column headerText="Name" style="width:30%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{u.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{u.name}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Surname" style="width:20%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{u.surname}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{u.surname}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
TableBean.java
public void onEdit(RowEditEvent event) {
FacesMessage msg = new FacesMessage(" Edited", ((User) event.getObject()).getName());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onCancel(RowEditEvent event) {
FacesMessage msg = new FacesMessage(" Cancelled", ((User) event.getObject()).getName());
FacesContext.getCurrentInstance().addMessage(null, msg);
}

Can't leave editing mode on prime faces roweditor

I have this code that shows a table with a prime faces datatable and a roweditor column. When I click on pencil icon, editable mode is enabled but after that, when I click on check or cancel icon nothing happens, editable mode remains active. I've search a lot about it but I couldn't find response. Listener on backing bean is not called.
This is my code of the view:
<p:dataTable var="vac" value="#{vacDocBean.obl}" id="documentacion" editable="true">
<f:facet name="header">
Table
</f:facet>
<p:ajax event="rowEdit" update="#this" listener="#{vacDocBean.onEditRow(_record)}" />
<p:column headerText="Edad">#{vacuna.inm.e}</p:column>
<p:column headerText="Inm">#{vac.inm.n}</p:column>
<p:column headerText="Fecha aplicacion">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{vac.fechaAplicacion}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</f:facet>
<f:facet name="input">
<p:calendar value="#{vac.fechaAplicacion}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Marca">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{vac.marca}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{vac.marca}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Lote">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{vac.lote}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{vac.lote}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Editar" styleClass="ui-editable-column-options">
<!-- <p:commandLink ajax="true">-->
<p:rowEditor />
<!-- </p:commandLink > -->
</p:column>
<f:facet name="footer">
Vacunación documentada
</f:facet>
</p:dataTable>
And the backing bean:
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.mycompany.calendario;
#Named(value="vacDocBean")
#SessionScoped
public class VacDocBean implements Serializable {
private List<Vac> obl;
public VacDocBean() {
obl = new ArrayList<Vac>();
setVac();
Collections.sort(obl);
}
private void setVac()
{
this.obl = new ArrayList(Helper.getObl());
}
public List<Vac> getObl() {
return obl;
}
public void setObligatorias(List<Vac> obl) {
this.obl = obl;
}
public void onEditRow(RowEditEvent e){
System.out.println("Hello");
}
public void onCancel(RowEditEvent e){
System.out.println("Hello 2");
}
}
Thanks!!
Just surround your h:datatable by a h:form tag, since the editable datatable needs it.
To make your listener method work, try that, whithout changing method's signature:
<p:ajax event="rowEdit" listener="#{vacDocBean.onEditRow}" />