how to add multiple empty input Text when clicked on commandbutton in primefaces

Question

Thanks Makky for ur help !!!

Industrialization Manager

                          <p:column styleClass="columnB" style="width:15%">
                            <ui:repeat var="input" value="#{bean.inputTexts}">
                                  <p:inputText size="15" value="#{input}" />
                          </ui:repeat>

                          <b style="padding: 0px 0px 0px 18px"> 
                          <p:commandButton value="Add Manager" actionListener="#{bean.addInput}" update="tbl"  
                              style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;font-size: 13px; color: #000000;
                                      text-align:center;font-weight: normal;text-decoration:none;cursor: pointer" /></b> 

                            </p:column> 
                        </p:row>

Thank you for your assistance !!! when user clicks on the "Add Manager" command Button then an empty inputText should be added and user can add max 6 manager. default page will contain one inputText and Add Manager(commandButton) but if user wants to add other manager then he can click on the Add Manager command button and other inputText will appear just below the previous one. — Rahul
– Rahul, Commented Dec 23, 2013 at 13:00
You are in a JSF facelet, so your manager list is hold by your java backing bean. The button must not add directly something in your page (javascript way). In JSF, your button call an action (ie "addManager" method) of your backing bean, it adds en empty element to the list (server side), and you refresh back your UI (on complete action). — Stephane Lallemagne
– Stephane Lallemagne, Commented Dec 23, 2013 at 13:29

Makky · Accepted Answer · 2013-12-23 13:39:39Z

I'll give you an example which will help you achieving this. You will end up adding your own code to make it work with your solution.

The web XHTML file

<!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>
    <title>Dummy Test</title>
    <link rel=" stylesheet" type="text/css" href="css/style.css"></link>

    <h:body>

        <br />
        <h:form id="form">
            <p:messages autoUpdate="true" showDetail="true" id="messages"></p:messages>
            <p:dataTable id="tbl" value="#{bean.dummyNames}" var="val">
                <p:column>
            #{val}
            </p:column>


                <p:column colspan="4">
                    <p:column styleClass="columnA" style="vertical-align:top;">Industrialization Manager</p:column>

                    <p:column styleClass="columnB" style="width:15%">
                        <ui:repeat var="input" value="#{bean.inputTexts}">
                            <p:inputText size="15" value="#{input}" />
                        </ui:repeat>

                        <b style="padding: 0px 0px 0px 18px"> <p:commandButton
                                value="Add Manager" actionListener="#{bean.addInput}"
                                update="tbl,messages"
                                style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;font-size: 13px; color: #000000;
                                          text-align:center;font-weight: normal;text-decoration:none;cursor: pointer ">

                            </p:commandButton>
                        </b>

                    </p:column>
                </p:column>
            </p:dataTable>

        </h:form>


    </h:body>

</h:head>

The managed-bean :

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

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

@ManagedBean(name = "bean")
@SessionScoped
public class TestBean implements Serializable {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private List<String> dummyNames;
    private String selectedName;
    private List<String> inputTexts;

    public TestBean() {
        dummyNames = new ArrayList<String>();
        dummyNames.add("AK");
        inputTexts = new ArrayList<String>();
        inputTexts.add("");

    }

    public void addInput(ActionEvent e) {
        if (inputTexts.size() == 5) {
            System.out.println("excedded limit");
            return;
        }
        inputTexts.add("");

    }

    public List<String> getDummyNames() {
        return dummyNames;
    }

    public void setDummyNames(List<String> dummyNames) {
        this.dummyNames = dummyNames;
    }

    public String getSelectedName() {
        return selectedName;
    }

    public void setSelectedName(String selectedName) {
        this.selectedName = selectedName;
    }

    public List<String> getInputTexts() {
        return inputTexts;
    }

    public void setInputTexts(List<String> inputTexts) {
        this.inputTexts = inputTexts;
    }

}

Output

On loading page

After clicking "Add Manager"

After adding manager

Collectives™ on Stack Overflow

how to add multiple empty input Text when clicked on commandbutton in primefaces

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related