PrimeFaces dialog doesn't working with datatable

Question

I followed here Demo but I don't know why doesn't working. It took me 3 days to solve but I can't figure out what wrong in my code. Hope anyone suggest me.

I'm using Hibernate + JSF 2.0 + PrimeFaces 3.5.

xhtml

<h:form id="form">

    <p:growl id="msgs" showDetail="true" />

    <p:dataTable id="customers" var="customer" value="#{customerBean.customer}">

        <p:column headerText="Model" style="width:24%">
            <h:outputText value="#{customer.firstName}" />
        </p:column>

        <p:column headerText="Year" style="width:24%">
            <h:outputText value="#{customer.lastName}" />
        </p:column>

        <p:column headerText="Manufacturer" style="width:24%">
            <h:outputText value="#{customer.dob}" />
        </p:column>

        <p:column headerText="Color" style="width:24%">
            <h:outputText value="#{customer.email}" />
        </p:column>

        <p:column style="width:4%">
            <p:commandButton id="selectButton" update=":form:display" oncomplete="carDialog.show()" icon="ui-icon-search" title="View">
                <f:setPropertyActionListener value="#{customer}" target="#{customerBean.selectedCustomer}" />
            </p:commandButton>
        </p:column>

    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"
              showEffect="fade" hideEffect="explode">

        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">

            <h:outputText value="Model:" />
            <h:outputText value="#{customerBean.selectedCustomer.firstName}" style="font-weight:bold"/>

            <h:outputText value="Year:" />
            <h:outputText value="#{customerBean.selectedCustomer.lastName}" style="font-weight:bold"/>


            <h:outputText value="Manufacturer:" />
            <h:outputText value="#{customerBean.selectedCustomer.dob}" style="font-weight:bold"/>

            <h:outputText value="Color:" />
            <h:outputText value="#{customerBean.selectedCustomer.email}" style="font-weight:bold"/>

        </h:panelGrid>

    </p:dialog>

</h:form>

customerBean (RequestScoped)

public class customerBean {

    private List<Customer> customer;
    private Customer selectedCustomer;

    /** Creates a new instance of customerBean */
    public customerBean() {
        customer = new ArrayList<Customer>();        
    }

    public List<Customer> getCustomer() {
        CustomersDao cust_dao = new CustomersDao();
        customer = cust_dao.findAll();
        return customer;
    }

    public Customer getSelectedCustomer() {
        return selectedCustomer;
    }

    public void setSelectedCustomer(Customer selectedCustomer) {
        this.selectedCustomer = selectedCustomer;
    }
}

Answer 1

Having tested your code, can confirm that definitely doesn't seem to have any problem (even you could improve it having separate forms). Here you have the SSCCE which works for me, give it a try yourself (you should try to minimize the problem, you could better start with something that works properly and adapt it to your concrete case).

@ManagedBean
@ViewScoped
public class CustomerBean implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = -6479501676353748761L;

    private Customer selectedCustomer;

    private List<Customer> customers = Arrays.asList(new Customer("Andy",
            "Brown", "A", "abrown@email.com"), new Customer("George", "Walter",
            "B", "gwalter@email.com"));

    public Customer getSelectedCustomer() {
        return selectedCustomer;
    }

    public void setSelectedCustomer(Customer selectedCustomer) {
        this.selectedCustomer = selectedCustomer;
    }

    public List<Customer> getCustomers() {
        return customers;
    }

    public class Customer {

        public Customer(String firstName, String lastName, String dob,
                String email) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.dob = dob;
            this.email = email;
        }

        private String firstName;

        private String lastName;

        private String dob;

        private String email;

        public String getFirstName() {
            return firstName;
        }

        public void setFirstName(String firstName) {
            this.firstName = firstName;
        }

        public String getLastName() {
            return lastName;
        }

        public void setLastName(String lastName) {
            this.lastName = lastName;
        }

        public String getDob() {
            return dob;
        }

        public void setDob(String dob) {
            this.dob = dob;
        }

        public String getEmail() {
            return email;
        }

        public void setEmail(String email) {
            this.email = email;
        }
    }

}

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head />

<h:body>

    <p:growl id="msgs" showDetail="true" />
    <h:form>
        <p:dataTable id="customers" var="customer"
            value="#{customerBean.customers}">

            <p:column headerText="Model" style="width:24%">
                <h:outputText value="#{customer.firstName}" />
            </p:column>

            <p:column headerText="Year" style="width:24%">
                <h:outputText value="#{customer.lastName}" />
            </p:column>

            <p:column headerText="Manufacturer" style="width:24%">
                <h:outputText value="#{customer.dob}" />
            </p:column>

            <p:column headerText="Color" style="width:24%">
                <h:outputText value="#{customer.email}" />
            </p:column>

            <p:column style="width:4%">
                <p:commandButton id="selectButton" oncomplete="carDialog.show()"
                    icon="ui-icon-search" title="View" update=":carDlg">
                    <f:setPropertyActionListener value="#{customer}"
                        target="#{customerBean.selectedCustomer}" />
                </p:commandButton>
            </p:column>

        </p:dataTable>
    </h:form>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
        id="carDlg" showEffect="fade" hideEffect="explode">
        <h:form id="dialog_form">

            <h:panelGrid id="display" columns="2" cellpadding="4"
                style="margin:0 auto;">

                <h:outputText value="Model:" />
                <h:outputText value="#{customerBean.selectedCustomer.firstName}"
                    style="font-weight:bold" />

                <h:outputText value="Year:" />
                <h:outputText value="#{customerBean.selectedCustomer.lastName}"
                    style="font-weight:bold" />


                <h:outputText value="Manufacturer:" />
                <h:outputText value="#{customerBean.selectedCustomer.dob}"
                    style="font-weight:bold" />

                <h:outputText value="Color:" />
                <h:outputText value="#{customerBean.selectedCustomer.email}"
                    style="font-weight:bold" />

            </h:panelGrid>

        </h:form>
    </p:dialog>

</h:body>

</html>

Answer 2

尝试更改var名称var =“ 客户 ” value =“＃{customerBean。 客户 }”

Answer 3

I tried your code and it works. Debug with FireBug and see if there is any error.