How to add <h:inputtext> dynamically in JSF?

Question

I my application I want to add more dynamically for ex: my application asks to input city and provides one but is the user wants to add more cities, I need to provide him more dynamically, so how to do that in JSF?

Answer 1

If it is about a limited number of cities you could use the rendered attribute to hide the fields unless needed.

Answer 2

Use table (h:dataTable).

The general idea: you have a list of Strings (each represents city name). There is only 1 item in your list at start - 1 empty string.

If you want to add one more city, you do some action (press "Add more cities" button for example), and this action put one more empty string to the list and your table should be rerendered (via ajax or whole page reloading).

After that you'll get 2 input fields on your page each binded to its own string value. Then user inputs city names, presses 'Process' button and it calls some action in which you can process the list which will already contain 2 non-empty strings.

<h:dataTable value="#{dataTableBean.cities}" var="city">
    <h:column>
    <f:facet name="header" >
        <h:outputText value="City name"/>
    </f:facet>    
    <h:inputText value="#{city}"/>
    </h:column>
</h:dataTable>

<h:commandButton value="Add one more city" action="#{dataTableBean.enlargeList}"/>
<h:commandButton value="Submit" action="#{dataTableBean.processList}"/>

In the bean:

private List<String> cities = new LinkedList<String>();

//getter and setter
...

public String enlargeList () {
    cities.add ("");
    return "refreshTable"; //the easiest way - just reload the page
}

Answer 3

You can use component and bind it with HtmlPanelGrid in backing bean. Then you can add components dynamically as needed. Here I have added outputText.

Page code :

<ice:panelGrid binding="#{backingBean.gridComponent}"/>

Backing Bean :

private HtmlPanelGrid gridComponent;

public void someFunction(){

HtmlOutputText outPutText = new HtmlOutputText();
outPutText.setValue("Some Text");

gridComponent.getChildren().add(outPutText);

}

// SETTERS / GETTERS