Problems with JSF datatable and Bootsfaces modal windows

Question

I am using JSF for my webapp (combined with EJB) and Bootsfaces as JavaScript addition to show modal windows. I am having a list of items that are being shown through a dataTable. And by clicking on a command button inside my list I am opening a modal window, asking the user "wether he is sure he wants to delete". That modal confirm dialog has YES and NO. I can execute the yes execute button inside the modal window. But I cant do #{controller.delete(item)} because the item is only server side available while building the list table. Somehow I have to send the actual selected item to the modal window to set it somehow in that controller call...???

Anyone got an idea?

<!-- looping the jsf list //-->
<h:dataTable value="#{controller.itemlist}" var="item"...
...
<!-- showing modal window //-->
<h:commandButton value="delete" action="" onClick="return false;" p:toggle-data.... />
</h:dataTable>
</h:form>
...
<!-- modal window in panel, with item not set //-->
...
<h:commandButton action="#{controller.delete(item)}" />
</h:form>
</b:panel>
...

Thrax Thrax · Accepted Answer · 2014-10-22T14:34:41

You could use ajax to populate your modal's content :

$.ajax({
    url : "yourPage.jsf",
    type : "POST",
    data : {
        id: "your object's id"
    },
    dataType : "html"
}).done(function(html) {
    $("#yourModal").html(html);
});

This ajax should be called with onclick event on your <h:commandButton>

And of course, you'd need to create a JSF view for your modal content. This view will contain your text and your two buttons "Yes" and "No". "No" should just dismiss your modal, while "Yes" should call your bean action : <h:commandButton action="#{controller.delete(item)}" />.

Don't forget to populate your controller item with the id parameter to bind data to your view.

EDIT :

I'll try to show you an example.

Main View (view.xhtml) :

<h:form>
  <h:dataTable value="#{controller.itemlist}" var="item">

    <h:column>
     ...
    </h:column>

    <h:column>
      <h:commandButton value="delete" onclick="return populateModal(#{item.id}); " />
    </h:column>

  </h:dataTable>

</h:form>

Script to populate your modal (view.xhtml) :

<script type="text/javascript">
  function populateModal(id) {
    $.ajax({
      url: "view2.jsf",
      type: "POST",
      data: { id: id },
      dataType: "html"
    }).done(function(html) {
      $("#modal").html(html);
      $("#modal").show();
    });

    return false;
  }
</script>

Then you need a view for your modal's content (view2.xhtml) :

<h:form>

  Delete #{testBean2.item.name} ?
  <h:commandButton value="YES" action="#{testBean2.delete(testBean2.item)}" />
  <h:commandButton value="NO" onclick="return closeModal();" />

</h:form>

And a controller for this view (testBean2.java) :

private Item item;

@PostConstruct
public void init() {
    // GET id parameter from HTTPRequest
    // Populate Local Item
}

public void delete(Item item) {
    // Delete your item
}

Problems with JSF datatable and Bootsfaces modal windows

1 Answers