Editable dataTable with modalPanel problem
I've asked this question a couple of times and gotten no response. I've pinned down the problem a little better. Hopefully someone can explain how this works.
I based my app on this richfaces demo:
http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=editDataTable
Here is how it seems the richfaces demo works. I've stepped through this on my local machine with the debugger:
You click the edit icon in the Action column, and the object in the current row is loaded into dataScrollerBean.currentItem via f:setPropertyActionListener. Just for an example, let's say the debugger identifies this object with id 14866. The information in currentItem is made available for editing in the modalPanel.
Clicking the Store button in the modalPanel, calls dataScrollerBean.store(). currentItem (id=14866) is available to the store() method allowing the recently edited input fields to be saved to the original object.
Here is how mine works.
You click the edit icon in the Action column, and the object in the current row is loaded into assetTagBean.currentItem (id=14932) via f:setPropertyActionListener. The information in currentItem is made available for editing in the modalPanel.
Clicking the Store button in the modalPanel, calls assetTagBean.store(). The currentItem object is available to store(), but it is a newly instantiated currentItem (id=15821) that was created when the values on the input fields were bound to attributes of currentItem. The only fields populated in currentItem at this point are the input fields in the modalPanel. Therefore the original item cannot be updated.
What is going on in the richfaces demo that I cannot reproduce?
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.active-row {
background-color: #FFEBDA;
}
</style>
<h:form>
<script type="text/javascript">
var row;
</script>
<a4j:region>
<rich:dataTable value="#{devTagsList.resultList}"
var="category" rows="20" rowKeyVar="row"
ajaxKeys="#{assetTag.keys}" id="table"
>
<f:facet name="header">
<h:outputText value="Asset Tags" />
</f:facet>
<rich:column>
<f:facet name="header">
<h:outputText value="Row Id" />
</f:facet>
<h:outputText value="#{row}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Tag" />
</f:facet>
<h:outputText value="#{category.devTagId}" id="model" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Serial Number" />
</f:facet>
<h:outputText value="#{category.devSerialNum}" id="price" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Comment" />
</f:facet>
<h:outputText value="#{category.comment}" />
</rich:column>
<rich:column width="200px">
<f:facet name="header">
<h:outputText value="Tag ID" />
</f:facet>
<h:outputText value="#{category.tagId}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Dev ID" />
</f:facet>
<h:outputText value="#{category.devId}" />
</rich:column>
<rich:column>
<f:facet name="header">
Actions
</f:facet>
<a4j:commandLink ajaxSingle="true" id="editlink"
oncomplete="#{rich:component('editPanel')}.show()">
<h:graphicImage value="/images/icons/edit.gif" style="border:0" />
<f:setPropertyActionListener value="#{category}"
target="#{assetTag.currentItem}" />
<f:setPropertyActionListener value="#{row}"
target="#{assetTag.currentRow}" />
</a4j:commandLink>
<rich:toolTip for="editlink" value="Edit" />
<a4j:commandLink ajaxSingle="true" id="deletelink"
oncomplete="#{rich:component('deletePanel')}.show()">
<h:graphicImage value="/images/icons/delete.gif" style="border:0" />
<f:setPropertyActionListener value="#{row}"
target="#{assetTag.currentRow}" />
</a4j:commandLink>
<rich:toolTip for="deletelink" value="Delete" />
</rich:column>
</rich:dataTable>
</a4j:region>
</h:form>
<rich:modalPanel id="editPanel" autosized="true" width="450">
<f:facet name="header">
<h:outputText value="Edit Current Asset Tag" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/modal/close.png" id="hidelink"
styleClass="hidelink" />
<rich:componentControl for="editPanel" attachTo="hidelink"
operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<h:form>
<rich:messages style="color:red;"></rich:messages>
<h:panelGrid columns="1">
<a4j:outputPanel ajaxRendered="true">
<h:panelGrid columns="2">
<h:outputText value="Make" />
<h:inputText value="#{assetTag.currentItem.devSerialNum}" />
<h:outputText value="Model" />
<h:inputText value="#{assetTag.currentItem.devTagId}" />
<h:outputText value="Price" />
<h:inputText value="#{assetTag.currentItem.comment}" />
</h:panelGrid>
</a4j:outputPanel>
<a4j:commandButton value="Store"
action="#{assetTag.store}"
reRender="make, model, price"
oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.hide();" />
</h:panelGrid>
</h:form>
</rich:modalPanel>
<rich:modalPanel id="deletePanel" autosized="true" width="200">
<f:facet name="header">
<h:outputText value="Delete this car from list?"
style="padding-right:15px;" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/modal/close.png"
styleClass="hidelink" id="hidelink2" />
<rich:componentControl for="deletePanel" attachTo="hidelink2"
operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<h:form>
<table width="100%">
<tbody>
<tr>
<td align="center" width="50%"><a4j:commandButton value="Yes"
ajaxSingle="true" action="#{assetTag.delete}"
oncomplete="#{rich:component('deletePanel')}.hide();"
reRender="table" /></td>
<td align="center" width="50%"><a4j:commandButton
value="Cancel"
onclick="#{rich:component('deletePanel')}.hide();return false;" />
</td>
</tr>
</tbody>
</table>
</h:form>
</rich:modalPanel>
<a4j:status onstart="#{rich:component('wait')}.show()"
onstop="#{rich:component('wait')}.hide()" />
<rich:modalPanel id="wait" autosized="true" width="200" height="120"
moveable="false" resizeable="false">
<f:facet name="header">
<h:outputText value="Processing" />
</f:facet>
<h:outputText value="Wait Please..." />
</rich:modalPanel>
<rich:messages></rich:messages>
</ui:composition>
/**
*
*/
package dne.nib.assettags.action;
import java.util.HashSet;
import java.util.Set;
import org.jboss.seam.annotations.Name;
import dne.nib.assettags.model.DevTags;
@Name("assetTag")
public class AssetTagBean {
private DevTags currentItem = new DevTags();
private Set<Integer> keys = new HashSet<Integer>();
private int currentRow;
public DevTags getCurrentItem() {
return currentItem;
}
public void setCurrentItem(DevTags currentItem) {
this.currentItem = currentItem;
}
public int getCurrentRow() {
return currentRow;
}
public void setCurrentRow(int currentRow) {
this.currentRow = currentRow;
}
public void store() {
System.out.println("currentRow is"+ currentRow);
System.out.println("currentItem is "+currentItem);
}
public Set<Integer> getKeys() {
return keys;
}
public void setKeys(Set<Integer> keys) {
this.keys = keys;
}
}
