Reputation: 35
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.
Upvotes: 0
Views: 18153
Reputation: 6570
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>
Upvotes: 1