Question

I have a column inside a <rich:dataTable> that contains <a4j:commandButton> for deleting rows.

Deleting rows works fine when calling bean’s delete function (e.g. #{bean.deleteCar(record.carId)}) via commandButton’s action attribute. Unfortunately, when using <a4j:jsFunction>‘s action attribute the record.carId of the last row is passed to the bean, instead of the selected row.

Some code for clarification. The following deletes the car of the clicked row:

<a4j:commandButton value="Delete"
                   action="#{bean.deleteCar(record.carId)}"/>

The following deletes last row’s car:

<a4j:commandButton value="Delete" 
                   onclick="#{rich:component('confirmDeletePane')}.show()">
    <a4j:jsFunction name="deleteCar" 
                    action="#{bean.deleteCar(record.carId)}"
                    oncomplete="#{rich:component('confirmDeletePane')}.hide();"
                    render="carsTable"/>
</a4j:commandButton>

<rich:popupPanel id="confirmDeletePane" header="Delete" modal="true" autosized="true" onmaskclick="#{rich:component('confirmDeletePane')}.hide();">
        <h:outputText value="Delete?"/>
        <h:panelGroup>
                <a4j:commandButton value="Cancel" onclick="#{rich:component('confirmDeletePane')}.hide(); return false;" />
                <a4j:commandButton value="OK" onclick="deleteCar(); return false;"/>
        </h:panelGroup>
    </rich:popupPanel>

As you can see I’m trying to confirm user’s selection before deletion.
Thanks in advance.

Answer 1

As the showcase suggests, I concluded that a refined solution is to use indices for row selections. I’m copying here for future reference.

The commandLink (calls confirmPane):

<a4j:commandLink execute="@this"
                 render="@none"
                 oncomplete="#{rich:component('confirmPane')}.show()">
       <h:graphicImage value="/images/icons/delete.gif" alt="delete" />
       <a4j:param value="#{it.index}" assignTo="#{carsBean.currentCarIndex}" />
</a4j:commandLink>

The confirmPane (calls the JS function):

<rich:popupPanel id="confirmPane" autosized="true">
        Delete?
        <a4j:commandButton value="Cancel" onclick="#{rich:component('confirmPane')}.hide(); return false;" />
        <a4j:commandButton value="Delete" onclick="remove(); return false;" />
</rich:popupPanel>

The jsFunction (calls Bean’s function):

<a4j:jsFunction name="remove" action="#{carsBean.remove}" render="table" execute="@this"
        oncomplete="#{rich:component('confirmPane')}.hide();" />

In the backing bean:

private int currentCarIndex; // with the getter/setter

public void remove() {
    // do your List removal (or DB transaction)
    // with the currentCarIndex
}