I am trying to put together a datatable to display some company information using Primefaces and java hosted with Tomcat7. Unfortunately due to sensitive information, I cannot give specifics about the data I'm working with. My code has been modified only to change variable names to more generic ones, and to remove business logic that doesn't touch the page.
I've got just about everything working, except when I try to add a new row to my datatable, it inserts the entire table into itself at the row that I was editing. This also happens when just cancelling the edit.
This is very confusing, considering I'm only inserting an item into a List object, which is in turn being fed into the table by Primefaces.
Here is the contents of my xhtml:
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<p:dataTable var="object" value="#{page.objectList}" id="tableName"
scrollable="false"
liveResize="true"
resizableColumns="true"
editable="true"
sortMode="multiple"
reflow="true"
paginator="true"
rows="20"
paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,20,50,100">
<f:facet name="header">
Table Title
</f:facet>
<p:ajax event="rowEdit" listener="#{page.onRowEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{page.onRowCancel}" update=":form:msgs" />
<p:column headerText="col1">
<p:cellEditor>
<f:facet name="output"><h:outputText id="col1Output" value="#{object.col1item}" /></f:facet>
<f:facet name="input">
<p:inputText id="col1Input" value="#{object.col1item}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="col2">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{object.col2item}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{object.col2item}" style="width:100%">
<f:selectItems value="#{object.categories}" var="col2item" itemLabel="#{col2item}" itemValue="#{col2item}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="col3">
<p:cellEditor>
<f:facet name="output"><h:outputText id="col3Output" value="#{object.col3item}" /></f:facet>
<f:facet name="input">
<p:inputText id="col3Input" value="#{object.col3item}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="col4">
<p:cellEditor>
<f:facet name="output"><h:outputText id="col4Output" value="$#{object.col4item}" /></f:facet>
<f:facet name="input">
<p:inputText id="col4Input" converterId="com.gvea.utilities.business.Money" value="#{object.col4item}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="col5">
<p:cellEditor>
<f:facet name="output"><h:outputText id="col5Output" value="#{object.col5item}" /></f:facet>
<f:facet name="input">
<p:inputText id="col5Input" value="#{object.col5item}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor/>
</p:column>
</p:dataTable>
</h:form>
and the onRowEdit and onRowCancel:
public void onRowEdit(RowEditEvent event) {
/*-- modify object --*/
...
objectList.add(0, newObject);
/*-- Give success or failure message --*/
}
public void onRowCancel(RowEditEvent event) {
FacesMessage msg = new FacesMessage("Edit Cancelled", "");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
The objectList.add(...) is the only place where I do anything that could potentially chance the page... and I've verified that "newObject" is in fact an instance of the right class. Yet still I end up getting this:
Thanks for any help!
As it turns out, I wasn't updating the datatable on the lines:
<p:ajax event="rowEdit" listener="#{page.onRowEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{page.onRowCancel}" update=":form:msgs" />
simply adding form
to the update line fixed my issue. Like so:
<p:ajax event="rowEdit" listener="#{page.onRowEdit}" update=":form:msgs form" />
<p:ajax event="rowEditCancel" listener="#{page.onRowCancel}" update=":form:msgs form" />