Dynamically add and remove inputText field using primefaces

Question

I have using primefaces in my project. I need to create and delete field dynamically on my project. Here I am going to attached my code please find it

my xhtml page is

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

            <h:panelGrid border="0" columns="3" cellpadding="4" columnClasses="control-label">

                <h:panelGrid columns="3"  cellpadding="4"  >


                <h:outputText value="Individual Email"/>
                <div>   
                <h:dataTable value="#{utilBean.attachments}" var="attachmentBean" binding="#{utilBean.data}" id="attachments">
                    <h:column>
                        <h:inputText id="attachment" value="#{attachmentBean.emailAddress}" binding="#{utilBean.attachment}"/>
                    </h:column>
                    <h:column>
                        <h:commandButton id="delete" value="Delete" immediate="true" actionListener="#{utilBean.deleteAddress}"/>
                    </h:column>
                </h:dataTable>

                <h:commandButton id="add" value="Add Email Address" immediate="true" actionListener="#{utilBean.addAddress}" />
                </div>
                <br/>

              </h:panelGrid>

          </h:panelGrid>

        </ui:composition>

My Bean Is:

            import java.util.ArrayList;
            import java.util.List;

            import javax.faces.bean.ManagedBean;
            import javax.faces.bean.SessionScoped;
            import javax.faces.component.UIData;
            import javax.faces.component.UIInput;
            import javax.faces.context.FacesContext;
            import javax.faces.event.ActionEvent;

            @ManagedBean
            @SessionScoped
            public class UtilBean{

                private UIData data=null;
                private UIInput attachment = null;

                private List<AttachmentBean> attachments = new ArrayList<AttachmentBean>();

                public void addAddress(ActionEvent event){

                    attachments.add(new AttachmentBean());
                    this.updateAddresses();
                    FacesContext.getCurrentInstance().renderResponse();
                    System.out.println("adress size:" + attachments.size());
                }

                public void deleteAddress(ActionEvent event){
                    int index = data.getRowIndex();     
                    this.updateAddresses();
                    this.getAttachments().remove(index);
                    FacesContext.getCurrentInstance().renderResponse();
                }

                public void updateAddresses(){
                    System.out.println("adress sizedfdfdfdf:" + attachments.size());
                    @SuppressWarnings("unchecked")
                    List<AttachmentBean> list = (ArrayList<AttachmentBean>)data.getValue();
                    for(int i =0;i<data.getRowCount();i++){
                        data.setRowIndex(i);
                        list.get(i).setEmailAddress((String)getAttachment().getSubmittedValue());
                    }
                    data.setRowIndex(0);
                }

                public UIData getData() {
                    return data;
                }

                public void setData(UIData data) {
                    this.data = data;
                }


                public UIInput getAttachment() {
                    return attachment;
                }

                public void setAttachment(UIInput attachment) {
                    this.attachment = attachment;
                }

                public List<AttachmentBean> getAttachments() {
                    return attachments;
                }

                public void setAttachments(List<AttachmentBean> attachments) {
                    this.attachments = attachments;
                }






            }

And the Attachment Class is

            import javax.faces.bean.ManagedBean;
            import javax.faces.bean.SessionScoped;

            import java.io.Serializable;

            @ManagedBean
            @SessionScoped
            public class AttachmentBean implements Serializable {

                private static final long serialVersionUID = 1L;



                private String emailAddress;

                public String getEmailAddress() {
                    return emailAddress;
                }

                public void setEmailAddress(String emailAddress) {
                    this.emailAddress = emailAddress;
                }

                public static long getSerialversionuid() {
                    return serialVersionUID;
                }

                public AttachmentBean() {
                    super();

                }


            }

I am not able to add textBox by clicking the add button. Please help. Thanks in advance.

score 0 · Accepted Answer · edited May 23 '17 at 12:11

You need to put the whole in a <h:form>. See also commandButton/commandLink/ajax action/listener method not invoked or input value not updated.

Another major mistake is here:

<h:dataTable ... binding="#{utilBean.data}">
    ...
        <h:inputText ... binding="#{utilBean.attachment}"/>

Remove those binding attributes. UI components are request scoped and yet you're binding them to a session scoped bean. This would fail hard if you open the same page in multiple browser windows in the same session. See also How does the 'binding' attribute work in JSF? When and how should it be used?.

That said, the @ManagedBean @SessionScoped on AttachmentBean is completely unnecessary. Get rid of those annotations. The @SessionScoped on UtilBean is also rather strange. The @ViewScoped is much better at its place here. See also How to choose the right bean scope?

Dynamically add and remove inputText field using primefaces

1 Answers1