Problems with advanced panels using ui:repeat

[casper]

Hi everyone,

I am trying to represent a list of objects in some Primefaces "advanced" panels (the ones you can toggle). Each object has its own panel where the header is the name of the object and, when expanded, displays its details. This is an example of the code I have atm:

Code: Select all

<ui:repeat var="current" value="#{bean.list}">
    <p:panel header="#{current.name}" toggleable="true" toggleListener="#{bean.toggleListener}" closeable="false">
        <!-- current object's details go here -->
    </p:panel>
</ui:repeat>

The problem I am having is that only the bottom panel is collapsing, regardless of which panel's toggle button is clicked. Say that I have three objects, therefore three panels. If I click the toggle button on the first panel, the third panel collapses. I know that the problem probably lies in using the <ui:repeat> tag, but I'm unsure of how to fix this. It is also worth mentioning that the toggleListener is completely empty.

Also (a little unrelated), I would like to use an image in the header of the panel... any suggestions for that? I am converting my code from ICEFaces, and I still have my <f:facet name="header"> section from using their panelCollapsible that's obviously not getting rendered.

Code: Select all

<f:facet name="header>
    <h:outputText value="#{current.name} />
    <h:graphicImage url="image/image1.png />
</f:facet>

Ideally, I would like this image next to the name in the header but the <p:panel> won't render an image inside the header attribute.

Thanks in advance for your help! Let me know if I forgot anything or need to clarify something.

[Captain Mingo]

It turns out that it is necessary to specify a unique widgetVar attribute in the panel tag to get panel toggle to work correctly.

For instance:

Code: Select all

<ui:repeat var="current" value="#{bean.list}">
    <p:panel header="#{current.name}" widgetVar="pnl#{bean.ID}" toggleable="true" toggleListener="#{bean.toggleListener}" closeable="false">
        <!-- current object's details go here -->
    </p:panel>
</ui:repeat>

In the example above, widgetVar="pnl#{bean.ID}" is the necessary attribute to ensure that the correct panel toggles. It seems that the widgetVar must also follow some naming convention (i.e. - must not start with a number, must not contain hyphens) because I tried to use a generated UUID for the value and it threw javascript errors. Also, when I tried to use a number for the widgetVar (value of bean.ID), I saw the following javascript error using firebug:

Code: Select all

invalid assignment left-hand side
       1 = new PrimeFaces.widget.Panel(...);

As a result, I preceded the #{bean.ID} with the string "pnl" so that widgetVar now follows naming convention.

[advorkovyy]

I figured out that 2.1 didn't had this problem.

Panel.resolveWidgetVar function (generated by maven-jsf-plugin) has to look like this:

Code: Select all

	public String resolveWidgetVar() {
		FacesContext context = FacesContext.getCurrentInstance();
		String userWidgetVar = (String) getAttributes().get("widgetVar");

		if(userWidgetVar != null)
			return userWidgetVar;
		 else
			return "widget_" + context.getExternalContext().encodeNamespace(getClientId(context).replaceAll("-|" + UINamingContainer.getSeparatorChar(context), "_"));
	}

I've tested it with primefaces trunk, JSF 2.1.0-b07, Jetty 8.0.0.M2. only Panel was patched. works fine.

unique widgetVar is a workaround until the problem gets solved in 2.2

[advorkovyy]

issue 1574 is created for this problem

[christopherR]

This helped me as well now, in 2018, because I had a widgetVar on a <p:selectCheckBoxMenu> repeated in a <p:tab> in a <p:accordionPanel> , and only the last rendered checkboxmeny would ahve its panel rendered when I attached a widgetVar to it. Making the property dynamic worked.

Still a bug in PF6.2

<p:accordionPanel id="consents" value="#{bean.containers}" var="container" sortBy="#{container.category}"
activeIndex="#{bean.activeIndex}">
<p:ajax event="tabChange" listener="#{bean.onTabChange}"/>
<p:tab>

<p:selectCheckboxMenu
id="selectedchannel"
label="#{container.selectedchannelTypes.size()} #{labels.channel}#{labels.multipleSuffix}"
filter="true"
filterMatchMode="contains"
widgetVar="selectchannels#{container.id}" <---- dynamic, won't work otherwise
value="#{container.selectedTypes}"
style="width:100%;" converter="#{typeConverter}"
disabled="#{!bean.powerUser}"
>
<f:selectItems
value="#{container.typeSelectItems}"/>
<p:ajax listener="#{container.onSelectionChanged}" event="change" process="@this" oncomplete="PF('selectchannels#{container.id}').show()"
update="selectedchannel"/>
<p:ajax listener="#{container.onSelectionChanged}" event="toggleSelect" process="@this" oncomplete="PF('selectchannels#{container.id}').show()"
update="selectedchannel"/>
</p:selectCheckboxMenu>

[kukeltje]

widgetvars need to be unique so I'd say it is not a bug.