How to confirm an action using a modal window in JSF?

Question

I have a JSF MyFaces dataTable that contains a list of elements and a column with a delete button. All I want to do is to popup a dialog when clicking on the delete button that would allow the user to confirm or cancel the operation.

I already have the dialog (reduced for simplicity and using <a> because of the lack of HTML5 support):

<div id="myModal">
    <h:form>
        <a data-dismiss="modal">Close</a>
        <h:commandLink action="#{somethingMagicInHere?}">Confirm</h:commandLink>
    </h:form>
</div>

In the dataTable I have something like this (also simplified):

<h:dataTable id="myDataTable" value="#{bean.elementList}" var="element">
    <h:column>
        <f:facet name="header">Actions</f:facet>
        <a class="call-modal">Delete</a>
    </h:column>
</h:dataTable>

Finally my ManagedBean looks like this:

@ManagedBean(name = "bean")
@RequestScoped
public class ElementClassBean {
    ...

    public String actionToPerform(ElementClass e) {
        MyBusinessLogicModel.getInstance().deleteElement(e);
    }
}

So, in short, jQuery executes when loading the page and takes all elements with class call-modal and sets an onclick to them so that they display the component with id myModal, which is of course the modal window. I inherited this working this way and prefer not change it but any solution or ideas will help.

I can use a commandLink directly in the dataTable that would access actionToPerform(element) from the view but that, of course, won't fire the modal. So the main issue I see, given this structure, is how can I send the element being iterated in the dataTable to the modal once the Delete button is clicked? (I don't mind if the solution uses Ajax).

Any input will be helpful. Thanks.

Answer 1

Ok, this is the ugly but working solution that doesn't require me to refactor all the views and managed beans. In short: I added a hidden input field that would store the id of the element to delete in the modal form. In the datatable all I do is setting the value of the hidden input field once the button is clicked and fire the modal. The modal is then filled with the just updated value.

My simplified modal:

<div id="myModal">
    <h:form id="myForm">
        <h:inputHidden value="#{bean.elementIdInModal}" id="elementIdInModal"/>
        <a data-dismiss="modal">Close</a>
        <h:commandLink action="#{bean[actionToPerform]}">Confirm</h:commandLink>
    </h:form>
</div>

My simplified dataTable:

<h:dataTable id="myDataTable" value="#{bean.elementList}" var="element">
    <h:column>
        <f:facet name="header">Actions</f:facet>
        <h:link styleClass="call-modal"
            onclick="$('#myForm\\:elementIdInModal').val(#{element.id})">
            Delete
        </h:link>
    </h:column>
</h:dataTable>

My simplified ManagedBean:

@ManagedBean(name = "bean")
@RequestScoped
public class ElementClassBean {
    private long elementIdInModal; // Ommiting getters and setters

    public void actionToPerform() {
        MyBusinessLogicModel.getInstance().deleteElement(elementIdInModal);
    }
}