CODEWITHSUNDEEP
jsfdatatablexpagesactionlistener
xpagesbeast
xpagesbeast

Reputation: 816

Deleting a DataTable row with confirmation message client side in XPages/JSF

I am working with a datatable of records. I want to give the user the ability to delete and edit a row inline (column with trash and edit icon). When the user wants to delete, I need a client-side custom confirmation. If they click yes, I want to submit to the server and delete the row.

I have this working without a confirm like this, because I am in the context of a <datatable />:

<xp:button styleClass="btn red"
           value="Delete"
           id="btnConfirmDelete">

    <xp:eventHandler event="onclick"
                     submit="true"
                     refreshMode="partial"
                     refreshId="dataTable"
                     disableValidators="true">

        <xp:this.parameters>
            <xp:parameter name="rowIndex"
                value="#{rowIndex}">
            </xp:parameter>
        </xp:this.parameters>

        <xp:this.actionListeners>
            <xp:actionListener type="com.domain.thing.listeners.deleteItemListener">
            </xp:actionListener>
        </xp:this.actionListeners>
    </xp:eventHandler>
</xp:button>

This button is in a repeat panel. Each row index is being applied by the EL "#{rowIndex}".

It works great.

Now I need to introduce a custom confirmation message.

So I replaced this button with a <a /> to launch the delete dialog box... and moved the delete button already working to the dialog box. The issue now, is I lost the "#{rowIndex}". Instead I use a custom property to set the value into the DOM.

The issue I'm having is retrieving this value in the listener com.domain.thing.listeners.deleteItemListener through the params.

I adjusted the code like this:

<xp:eventHandler event="onclick"
                 submit="true"
                 refreshMode="partial"
                 refreshId="demurrageDataTable"
                 onStart="XSP.setSubmitValue(window.dataTableRowDelete); alert('row is ' + XSP.getSubmitValue());"
                 onError="alert('onError: There was an error with the request.');"
                 disableValidators="true">

    <xp:this.parameters>
        <xp:parameter name="rowIndex"
                      value="#javascript:context.getSubmittedValue();}">
        </xp:parameter>
    </xp:this.parameters>
    <xp:this.actionListeners>
        <xp:actionListener type="com.canalbarge.trak.listeners.deleteDemurrageItemListener">
        </xp:actionListener>
    </xp:this.actionListeners>
</xp:eventHandler>

onStart I get the rowIndex that was set by the launch of the dialog. When the alert fires, the correct rowIndex is displayed.

Server side in the event listener has an exception because p.getValue() is always an empty string "".

XspEventHandler eventHandler = (XspEventHandler) event.getSource();
List<Parameter> params = eventHandler.getParameters();
System.out.println(btnName + "checking event params");

if(params != null){
    for (Parameter p : params) {
        System.out.println(btnName + p.getName() + "," + p.getValue());
        if(p.getName().equals("rowIndex")){
            rowIndex = Integer.parseInt(p.getValue());
        }
    }
}
else{
    System.out.println(btnName + "params is null.");
}

Upvotes: 0

Views: 414

Answers (3)

xpagesbeast
xpagesbeast

Reputation: 816

The solution is in my comments. You need to set the rowIndex when clicking the row edit icon. In my case, I am using the submitted value variable. As Paul Stephans Withers indicated, you could use one of the Scoped Variables. In all cases, save the rowIndex in one of the application map variables and when your dialog executes, you need to use this variable value.

Upvotes: 0

Frantisek Kossuth
Frantisek Kossuth

Reputation: 3524

Define client side script of that delete event with simple return confirm("Are you sure?"); That will execute SSJS script only if the user clicked Yes.

Upvotes: 0

Paul Stephen Withers
Paul Stephen Withers

Reputation: 15729

My typical approach for this kind of thing - button in repeat, launching dialog, then acting on the row server-side when the dialog is closed - is to store the reference to the element of the repeat in a viewScope variable. It's possible that passing it to an xp:inputHidden would work too and could be done via CSJS, so avoid using SSJS to launch the dialog.

Upvotes: 1

Related Questions