Prime Community Forum

Posted: **05 Sep 2014, 03:36**

Hi

I have a simple requirement that someone else ought to have had before, but cannot find a solution in the forums.

I have a datatable with in editMode="cell", in which only the first column editable. When the cell is edited and loses focus, the AJAX event gets fired properly. The logic in that backing bean method changes rest of the data for that row, based on the input. At this point I want to show the updated data in that row. But no matter what I have tried, it does not show the updated data in the row/table. (I can verify that the data has indeed changed in the list by switching to another screen and coming back to it).

I tried partialSubmit="true", process="@this", forcing update of the individual cells using RequestContext, updating the entire datatable with and without an enclosing form etc. - none works. In each case, I am making sure that I am referring to the appropriate ID generated in the pattern ":formID:componentID". I also made sure that there are no JavaScript errors on the page.

Relevant JSF code:

Code: Select all

            <h:form id="badSsnForm"> 

                <p:dataTable id="badSsnsList" value="#{ssnXRefMBean.ssnXRefInfo.badSsnTEs}"
                             var="item" rowKey="item.ssn" editable="true" editMode="cell">
                    <p:ajax event="cellEdit" listener="#{ssnXRefMBean.onCellEdit}" update=":badSsnForm:badSsnsList,:growlMsg"/>

                    <f:facet name="header">
                        <h:outputText value="Bad SSNs"/>
                    </f:facet>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="SSN"/>
                        </f:facet>
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{item.ssn}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputMask id="itemSsn" value="#{item.ssn}" mask="999-99-9999" converter="SsnConverter"
                                             title="Please enter 9 digits" size="12" autocomplete="off" />
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="TE SUID"/>
                        </f:facet>
                        <h:outputText id="teSuid" value="#{item.teSuid}"/>
                    </p:column>
                    <p:column >
                        <f:facet name="header">
                            <h:outputText value="Name"/>
                        </f:facet>
                        <p:outputLabel id="dispName" value="#{item.displayName}"/>
                    </p:column>
<!-- other columns -->
                 </p:dataTable>

            </h:form>

cellEdit event handler in the backing bean:

Code: Select all

    public void onCellEdit(CellEditEvent event) {
        int index = event.getRowIndex();
        String oldSsn = (String) event.getOldValue();
        String newSsn = (String) event.getNewValue();

// Other logic to get the info for newSsn from the EJB
        ssnXRefInfo.getBadSsnTEs().set(index, updatedTE);

        // Tried to update individual cells with the following, that also doesn't work
    //    RequestContext requestContext = RequestContext.getCurrentInstance();
    //    requestContext.update("badSsnForm:badSsnsList:" + index + ":teSuid");
    //    requestContext.update("badSsnForm:badSsnsList:" + index + ":dispName");
    }

Please help. Any way to show the updated data in the table, in the true AJAX way (without the user having to click another button).

Thanks
NN

Posted: **05 Sep 2014, 11:58**

The only thing I can think of is that you are changing the persisted values successfully but not refreshing the data used in the view.

Posted: **05 Sep 2014, 22:24**

Andyba, Thanks for the quick response. But there is no persistence happening at that time - just a query to get the person data for the newly entered SSN.

This statement sets it to the list used by the dataTable:

Code: Select all

ssnXRefInfo.getBadSsnTEs().set(index, updatedTE);

As I mentioned, I can verify that the data has indeed changed in the list (ssnXRefMBean.ssnXRefInfo.badSsnTEs) by switching to another screen and coming back to it, in which case it is just displaying the updated data in the session (no query gets executed again unless I press a button).

Further, if I change the Ajax statement to update the entire form - like,

Code: Select all

       
<h:form id="badSsnForm">              
         <p:dataTable id="badSsnsList" value="#{ssnXRefMBean.ssnXRefInfo.badSsnTEs}"
                             var="item" rowKey="item.ssn" editable="true" editMode="cell">
                    <p:ajax event="cellEdit" listener="#{ssnXRefMBean.onCellEdit}" update=":badSsnForm,:growlMsg"/>

after the Ajax update kicks in, the entire dataTable disappears and only the entered value shows up in its place!

- NN

Posted: **22 Sep 2014, 11:40**

Mybe you can try the following way if you don't hava a solution.

<p:ajax event="cellEdit" listener="#{ssnXRefMBean.onCellEdit}" update="@none"/>

public void onCellEdit(CellEditEvent event) {
int index = event.getRowIndex();
String oldSsn = (String) event.getOldValue();
String newSsn = (String) event.getNewValue();

// Other logic to get the info for newSsn from the EJB
ssnXRefInfo.getBadSsnTEs().set(index, updatedTE);

// Tried to update individual cells with the following, that also doesn't work
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("badSsnForm:badSsnsList:" + index + ":teSuid");
requestContext.update("badSsnForm:badSsnsList:" + index + ":dispName");

requestContext.update("growlMsg");
}

Posted: **09 Jul 2015, 10:50**

natrajn wrote: after the Ajax update kicks in, the entire dataTable disappears and only the entered value shows up in its place!

Hi Natranj, I have the exact same behaviour trying to update my datatable after a cellEdit ajax event (with Primefaces 5.2).

The strange thing is that other datatables update just fine. This one is dynamically generated in a c:forEach though, and I can't get the datatable to refresh correctly.

Did you find any solution?

Posted: **09 Sep 2015, 12:02**

Hello!

Try this:

Code: Select all

		<p:remoteCommand name="onCellEdit"  update=":mainForm:mainTabView:plannedSupplyEditTable" />
		<p:dataTable emptyMessage="Brak danych" var="plannedSupply" id="plannedSupplyEditTable"
			value="#{tradeGoodsPlanningBean.plannedSupplies.rows}" 
			scrollable="true"
			scrollWidth="98%"
			editable="true"
			editMode="cell"
			rowStyleClass="#{plannedSupply.summaryRow ? 'suppliesSummary' : null}">
			
			<p:ajax event="cellEdit" listener="#{tradeGoodsPlanningBean.onCellEdit}" 
				oncomplete="onCellEdit()" />

Posted: **30 Jan 2023, 15:36**

petr.nadeiko wrote: ↑

09 Sep 2015, 12:02

Hello!

Try this:

Code: Select all

		<p:remoteCommand name="onCellEdit"  update=":mainForm:mainTabView:plannedSupplyEditTable" />
		<p:dataTable emptyMessage="Brak danych" var="plannedSupply" id="plannedSupplyEditTable"
			value="#{tradeGoodsPlanningBean.plannedSupplies.rows}" 
			scrollable="true"
			scrollWidth="98%"
			editable="true"
			editMode="cell"
			rowStyleClass="#{plannedSupply.summaryRow ? 'suppliesSummary' : null}">
			
			<p:ajax event="cellEdit" listener="#{tradeGoodsPlanningBean.onCellEdit}" 
				oncomplete="onCellEdit()" />

Hello from 2023

It helped me, thanks!

Prime Community Forum

How to update dataTable after AJAX event cellEdit?

How to update dataTable after AJAX event cellEdit?

Re: How to update dataTable after AJAX event cellEdit?

Re: How to update dataTable after AJAX event cellEdit?

Re: How to update dataTable after AJAX event cellEdit?

Re: How to update dataTable after AJAX event cellEdit?

Re: How to update dataTable after AJAX event cellEdit?

Re: How to update dataTable after AJAX event cellEdit?