How to dynamically add jsf component using ajax

Question

Currently I have this code which dynamically add components through html request. It is working as I expected. But I want to add the components by using ajax request instead of html.

test.xhtml

    <h:dataTable value="#{testController.items}" var="item">
        <h:column><h:inputText value="#{item.name}" /></h:column>
        <h:column><h:commandButton value="remove" action="#{testController.remove(item)}" /></h:column>
    </h:dataTable>
    <h:commandButton value="add" action="#{testController.add}" />

backing bean

@ManagedBean
@ViewScoped
public class TestController implements Serializable {

    private List<Language> items = new ArrayList<Language>();

    public void add() {
        items.add(new Language());
    }

    public void remove(Language item) {
        items.remove(item);
    }

    public List<Language> getItems() {
        return items;
    }
}

now I need to do this using ajax request. How can I do that?

score 0 · Answer 1 · answered Oct 02 '16 at 02:54

This code worked for me

<h:dataTable id="testTable" value="#{testController.items}" var="item">
        <h:column><h:inputText value="#{item.name}" /></h:column>
        <h:column><h:commandButton value="remove" action="#{testController.remove(item)}" /></h:column>
    </h:dataTable>
            <h:commandButton value="add" action="#{testController.add}">
                <f:ajax execute="@this" render="testTable" />
            </h:commandButton>

How to dynamically add jsf component using ajax

1 Answers1