update primefaces dataTable with new rows adding dynamically

Question

When I click on the button New <p:commandButton actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/>, a new row is added to my dataTable on only the first click and the page is refreshed. Several cliques except the first were not refreshes the dataTable. So to see my newly added rows, I use the F5 key to refresh my page. Certainly my update="dataTableSaisiePiece" not work or only works rather the first click.

Here is my page home.xhtml :

    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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:ui="http://java.sun.com/jsf/facelets"
          xmlns:p="http://primefaces.org/ui">
    <script type="text/javascript">
            function addRowOnComplete() {
      jQuery('#supercoolnewrow').trigger('click');
    }
    </script>
        <ui:composition template="/resources/template/all.xhtml">
            <ui:define name="titre">Saisie</ui:define>

            <ui:define name="content">
                <p:tabView id="ViewPlan">

                    <p:tab id="tab2" title="Saisie 1">
                        <h:outputScript library="js" name="frenchLocale.js" />
                                <h:form id="formPiece">
                                    <p:panel id="panelSaisie" header="Saisir" style="color: brown;font-size: 15px">
                                        <h:panelGrid columns="3" >
                                                <p:outputLabel for="description" value="Description:" ></p:outputLabel>
                                                <p:inputText id="description" value="#{ecritureCtrl.description}" required="true" label="Description" maxlength="100" size="75">  
                                                        <f:validateLength maximum="100" />  
                                                    </p:inputText>
                                                    <p:message for="description" />

                                                <p:outputLabel for="date" value="Date:" ></p:outputLabel>
                                                <p:calendar locale="fr" id="date"  required="true" label="Date" value="#{ecritureCtrl.date}" />  
                                                <p:message for="date" />  

                                                <p:outputLabel for="code" value="Code Avant" ></p:outputLabel>
                                                <p:inputText id="code" value="#{ecritureCtrl.code}" required="true" >  

                                                </p:inputText>
                                                <p:message for="code" />

                                            </h:panelGrid>
                                        <br/>
                                        <p:dataTable var="line" value="#{ecritureCtrl.lignes}"  id="dataTableSaisiePiece" >

                                <p:column headerText="First Name" style="width:150px">
                                    <p:inputText value="#{line.intituleCompte}" style="width:100%"/>
                                 </p:column>  

                                <p:column headerText="Last Name" style="width:150px">
                                    <p:inputText value="#{line.code}" style="width:100%"/>

                                </p:column>

                            </p:dataTable>


                           </p:panel>
                                    <p:commandButton  actionListener="#{ecritureCtrl.newLine}" value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()" ajax="true"/>
                                   </h:form>  

                            </p:tab>

                    <p:tab id="tab3" title="Saisie 2">
                    </p:tab>

                </p:tabView>

            </ui:define>
        </ui:composition>

    </html>

My ManagedBean:

    @ManagedBean (name = "ecritureCtrl")
    @SessionScoped
    public class EcritureCtrl {
    private List<Avant> lignes = new ArrayList<Avant>();
    Avant unUser;

    private String description;
    private Date date;
    private String code;
        public EcritureCtrl() {
            lignes.add(new Avant());
         }

        public void newLine(ActionEvent actionEvent){
            lignes.add(new Avant());            
        }

    }

Could you please help me ? Thanks in advance.

@Leo I haven't equals and hashcode methods. I don't use either converter. Should I ? — It.Next

Leo Leo · Accepted Answer · 2014-02-03T16:46:15

this seems to work for me

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

@ManagedBean
@SessionScoped
public class EcritureCtrl implements Serializable {
    private static final long   serialVersionUID    = 1L;
    private String              code;
    private Date                date;

    private String              description;
    private List<Avant>         lignes              = new ArrayList<Avant>();
    private Avant               unUser;

    public String getCode() {
        return this.code;
    }

    public Date getDate() {
        return this.date;
    }

    public String getDescription() {
        return this.description;
    }

    public List<Avant> getLignes() {
        return this.lignes;
    }

    public Avant getUnUser() {
        return this.unUser;
    }

    @PostConstruct
    private void init(){
        this.lignes.add(new Avant());
    }

    public void newLine(ActionEvent actionEvent) {
        this.lignes.add(new Avant());
    }

    public void setCode(String code) {
        this.code = code;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public void setLignes(List<Avant> lignes) {
        this.lignes = lignes;
    }

    public void setUnUser(Avant unUser) {
        this.unUser = unUser;
    }

}

and

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Sorry</title>
</h:head>
<h:body>
<script type="text/javascript">
function addRowOnComplete() {
    alert();
}
</script>
    <h:form id="formPiece">

        <p:messages id="messages" showDetail="true" autoUpdate="true"
            closable="true" />

        <p:tabView id="ViewPlan">

            <p:tab id="tab2" title="Saisie 1">
                <p:panel id="panelSaisie" header="Saisir"
                    style="color: brown;font-size: 15px">
                    <h:panelGrid columns="3">
                        <p:outputLabel for="description" value="Description:"></p:outputLabel>
                        <p:inputText id="description" value="#{ecritureCtrl.description}"
                            required="true" label="Description" maxlength="100" size="75">
                            <f:validateLength maximum="100" />
                        </p:inputText>
                        <p:message for="description" />

                        <p:outputLabel for="date" value="Date:"></p:outputLabel>
                        <p:calendar locale="fr" id="date" required="true" label="Date"
                            value="#{ecritureCtrl.date}" />
                        <p:message for="date" />

                        <p:outputLabel for="code" value="Code Avant"></p:outputLabel>
                        <p:inputText id="code" value="#{ecritureCtrl.code}"
                            required="true">

                        </p:inputText>
                        <p:message for="code" />

                    </h:panelGrid>
                    <br />
                    <p:dataTable var="line" value="#{ecritureCtrl.lignes}"
                        id="dataTableSaisiePiece">

                        <p:column headerText="First Name" style="width:150px">
                            <p:inputText value="#{line.intituleCompte}" style="width:100%" />
                        </p:column>

                        <p:column headerText="Last Name" style="width:150px">
                            <p:inputText value="#{line.code}" style="width:100%" />
                        </p:column>

                    </p:dataTable>


                </p:panel>
                <p:commandButton actionListener="#{ecritureCtrl.newLine}"
                    value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()"
                     ajax="true" />

            </p:tab>

            <p:tab id="tab3" title="Saisie 2">
            </p:tab>

        </p:tabView>
    </h:form>

</h:body>
</html>

update primefaces dataTable with new rows adding dynamically

1 Answers