PrimeFaces p:accordionPanel inside ui:repeat or c:

Question

I'm trying to create multiple accordionPanels. I tried to include this tag inside repeat elements (e.g. c:forEach). The accordionPanel is well rendered, but I'm unable to switch from one tab to another.

These are some codes I tried:

<ui:repeat value="#{myBackingBean.myList}" var="o">
    <p:accordionPanel dynamic="true" cache="true" multiple="true" widgetVar="accordion">
        <p:tab title="Title 1">
            #{o.data_one}
        </p:tab>
        <p:tab title="Title 2">
            #{o.data_two}
        </p:tab>
    </p:accordionPanel>
</ui:repeat>

And also

<c:forEach items"${myBackingBean.myList}" var="o">
    <p:accordionPanel dynamic="true" cache="true" multiple="true" widgetVar="accordion">
        <p:tab title="Title 1">
            #{o.data_one}
        </p:tab>
        <p:tab title="Title 2">
            #{o.data_two}
        </p:tab>
    </p:accordionPanel>
</ui:repeat>

Both of these codes produces a list of accordionPanels, each with two tabs. But I'm unable to switch from one tab to another: If I click one tab it does not open nor close (except for the last accordionPanel).

Noteworthy, if I put two or more accordionPanels by hand (without JSF loops) they works.

Also, I've checked the requests the browser sends when I try to open/close a tab. The requests I intercept are like:

<?xml version="1.0" encoding="utf-8"?><partial-response><changes><update id="mainForm:tabView"><![CDATA[
// something that always use the id of the HTML tag of the _last_ accordionPanel
</update></changes></partial-response>

How can I put an <accordionPanel> inside an <ui:repeat> or <c:forEach> so that I can still switch the accordionPanel's tab?

Answer 1

Its the problem with the widgetVar when you put p:accordion in ui:repeat, it will generate Accordion Panel components with different/dynamic Ids but not with different/dynamic widgetVar when you explicitly specify widgetVar like you're doing in your code.

Which is basically name to Javascript Object to access the Client side Api functions of p:accordion.

So If you are not using that widgetVar of p:accordions anywhere, Remove widgetVar attribute, then the widgetVar will be generated dynamically.

If you still want to use widgetVar, give dynamic name yourself, for example:

widgetVar="accordion_#{o.data_one}" 

Note: I tried the above strategy with only on ui:repeat.
Using:Primefaces 3.5 and JSF 2.1.13 and its working for me.