How to dynamically add and remove a tab in p:tabView component

Question

I am trying to add a PrimeFaces <p:tab> dynamically. While adding the second tab I am getting the following exception:

"java.lang.IllegalStateException: Component ID tab0 has already been found in the view".

How can I solve this?

Here is the view code:

<h:form prependId="false">
    <p:tabView id="tabview" dynamic="true" cache="false" 
        binding="#{testBean.tabView}" 
        activeIndex="#{testBean.activeTab}" >  
        <h:commandButton value="Close" action="#{testBean.removeTab}"/>
    </p:tabView>  
    <h:commandButton value="Add Tab" action="#{testBean.addTab}"/>
</h:form>

Here is the bean code:

public String addTab() {
    String tabId="tab"+id;
    System.out.println("Gen Id: "+tabId);
    tab = new Tab();
    tab.setTitle("Title: "+tabId);
    tab.setId(tabId);

    System.out.println("Tab Id: "+tab.getId());
    tabView.getChildren().add(id,this.tab);
    id++;
    return "tabtest.jsf";
}

public String removeTab() {
    tabView.getChildren().remove(activeTab);
    return "tabtest.jsf";
}

Answer 1

Don't manually create components if everything can just be done in the view. This construct will fail if the bean is in a broader scope than the request scope. See also e.g. Binding attribute causes duplicate component ID found in the view

Follow the showcase example "TabView with Model" which allows you to dynamically populate tabs via a sane model and <p:tabView value="..." var="..."> like as <ui:repeat>/<h:dataTable>.

E.g. this view

<h:form>
    <p:tabView value="#{bean.tabs}" var="tab">  
        <p:tab title="#{tab.title}">
            #{tab.content}
            <p:commandButton value="Close" action="#{bean.remove(tab)}" update="@form" />
        </p:tab>
    </p:tabView>  
    <p:commandButton value="Add Tab" action="#{bean.add}" update="@form" />
</h:form>

with this controller

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private List<Tab> tabs;

    @PostConstruct
    public void init() {
        tabs = new ArrayList<>();
    }

    public void add() {
        tabs.add(new Tab("tab" + tabs.size(), "some content"));
    }

    public void remove(Tab tab) {
        tabs.remove(tab);
    }

    public List<Tab> getTabs() {
        return tabs;
    }

}

and this model

public class Tab {

    private String title;
    private String content;

    public Tab(String title, String content) {
        this.title = title;
        this.content = content;
    }

    public String getTitle() {
        return title;
    }

    public String getContent() {
        return content;
    }

}

Answer 2

This is because same ID is being generated for new tab(The one which ur adding). To avoid this, append a variable to the id as

<p:tabView id="tabview_#{testBean.i}" dynamic="true" cache="false"binding="#{testBean.tabView}" 
        activeIndex="#{testBean.activeTab}" >  
        <h:commandButton value="Close" action="#{testBean.removeTab}"/>
 </p:tabView>