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
– It.Next, Commented Feb 3, 2014 at 12:18

Leo · Accepted Answer · 2014-02-03 16:46:15Z

1

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>

answered Feb 3, 2014 at 16:46

Leo

6,5804 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Leo Over a year ago

consider using ViewScoped instead too

It.Next Over a year ago

Perfect Leo It works. That is exactly what I wanted. I removed the Javascript function addRowOnComplete () that wasn't useful. I did not understand your comment : > consider using ViewScoped instead too Can you explain that?

Leo Over a year ago

Sometimes, the session scope can be too broad. Pages that use session scope are kept during the whole user session, and if that user navigate through your app, it will keep more and more data in the session and this can be a problem if your intention is to serve many users at the same time due to memory constraints. That´s why, for pages that just need to keep the context to interactions limited to the same page, you can use view scope, which will live only until you leave that page.

It.Next Over a year ago

Thank you for this important information. In fact I am new in jsf development and I admit that I need a good book to have the basics in this technology :) If I put @SessionScoped to the managedBean ecritureCtrl, this is for my page home.xhtml always be ready to be used by a user, if the user has a valid session. At the moment, I do not yet manages user sessions in my application.

It.Next Over a year ago

The question I ask myself is how to make sure not to explode the memory with all objects that are put into the session. In my understanding, the beans are managed on the server side in the container. Against by the ManagedBean managed where? What are the criteria to be taken into account to choose the session scope ?

|

Collectives™ on Stack Overflow

update primefaces dataTable with new rows adding dynamically

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related