Java – h:commandButton not working within PrimeFaces p:dataTable

javajsfprimefaces

I have a PrimeFaces datatable. For each row in this table, I want to allow the user to update/delete the row entry (a user).

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
    <link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" />
</h:head>
<h:body>
    <center>
        <h:form>
            <p:panel id="viewUsersPanel" header="View Users">
                <p:dataTable var="user" value="#{uController.users}"
                    emptyMessage="No Users Found.">
                    <p:column style="text-align: center;">
                        <f:facet name="header">
                            <h:outputText value="Name" />
                        </f:facet>
                        <h:outputText value="#{user.name}" />
                    </p:column>
                    <p:column style="text-align: center;">
                        <f:facet name="header">
                            <h:outputText value="Postal Address" />
                        </f:facet>
                        <h:outputText value="#{user.address}" />
                    </p:column>
                    <p:column style="text-align: center;">
                        <f:facet name="header">
                            <h:outputText value="Phone Number" />
                        </f:facet>
                        <h:outputText value="#{user.phone}" />
                    </p:column>
                    <p:column style="text-align: center;">
                        <f:facet name="header">
                            <h:outputText value="Email Address" />
                        </f:facet>
                        <h:outputText value="#{user.email}" />
                    </p:column>
                    <p:column style="text-align: center;">
                        <f:facet name="header">
                            <h:outputText value="DOB" />
                        </f:facet>
                        <h:outputText value="#{user.dob}">
                            <f:convertDateTime pattern="dd-MMM-yyyy" />
                        </h:outputText>
                    </p:column>
                    <p:column style="text-align: center;">
                        <f:facet name="header">
                            <h:outputText value="No. Memberships" />
                        </f:facet>
                        <h:outputText value="#{user.numberOfMemberships}" />
                    </p:column>
                    <p:column style="text-align: center;">
                        <f:facet name="header">
                            <h:outputText value="Actions" />
                        </f:facet>
                        <h:commandButton value="Update" action="#{uController.update}" />
                        <h:commandButton value="Delete" action="#{uController.delete}" />
                    </p:column>
                </p:dataTable>
                <h:panelGrid columns="2" cellpadding="2" id="footerPanelGrid"
                    border="0">
                    <h:commandButton action="#{uController.home}" value="Home Page" />
                </h:panelGrid>
            </p:panel>
        </h:form>
    </center>
</h:body>
</html>

However, neither of the buttons work. Instead they appear to simply refresh the view page. I have ran the app in debug and neither update or delete method is hit.

I suspect this may be due to using h:commandButton within a p:dataTable. However, I have also tried p:commandButton but to no avail.

For reference, here is a snippet of the UserController class:

@ManagedBean(name="uController")
public class UserController extends AbstractController {

    private Collection<User> users;

            ...

    public String update() {

        System.out.println("Ready for update");

        return "update-user";
    }

    public String delete() {

        System.out.println("Ready for delete");

        return "delete-user";
    }
            ...
}

Best Answer

I have found the solution using a ViewScoped bean. The article that I came across for this:

Learning JSF2: Managed beans

I changed my h:commandButton to:

<h:commandButton value="Delete" action="#{userList.delete}">
    <f:setPropertyActionListener target="#{userList.selectedUser}"
        value="#{user}" />

I also re-designed my UserController class and it became UserList:

import java.util.Collection;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;

@ManagedBean(name="userList")
@ViewScoped
public class UserList {

    private Collection<User> users;
    private User selectedUser;

    @ManagedProperty(value="#{userService}")
    private UserService userService;

    public void setUserService(UserService userService) {

        this.userService = userService;
    }

    @PostConstruct
    public void populateList() {

        users = userService.getUsers();
    }

    public void delete() {

        // TODO remove from DB

        users.remove(selectedUser);
    }

    public User getSelectedUser() {

        return selectedUser;
    }

    public void setSelectedUser(User selectedUser) {

        this.selectedUser = selectedUser;
    }

    public Collection<User> getUsers() {

        return users;
    }

}

Thanks for your responses Zenzen.

Related Topic