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";
}

It seems that `id` is badly managed. Could you post more code (declaration of `id` for example) ? BWT, your methods can return `void` if you want to stay on the same page `tabtest.jsf`. — Jean-Charles, Sep 06 '11 at 09:00
@janasoft : could you let us know how you managed to solve this (if it has been solved now) ? — Rajat Gupta, Sep 21 '11 at 19:33

score 13 · Answer 1 · edited May 23 '17 at 12:26

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;
    }

}

Great, I didn't know tabs can be generated that way! +1 – iozee Sep 16 '14 at 20:52 — iozee, Sep 16 '14 at 20:52

score 0 · Answer 2 · edited Apr 19 '13 at 03:44

0

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>

edited Apr 19 '13 at 03:44

Anthon

69,918
32
186
246

answered Apr 19 '13 at 03:28

Jerry

373
2
4
12

This will work by having difeerent id .can u say me the reason for voting this as not useful. share your code – Jerry Apr 23 '13 at 11:21

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

2 Answers2

Linked

Related