jsf - f:ajax render referencing iterated component

Question

I have xhtml with following structure:

<h:form id="frmMain2">
        <f:subview id="sub1">
            <ui:repeat var="vatId" value="#{someBean.suppliesKeys()}" id="rep1">
                <fieldset>
                    <legend>vatId</legend>
                    <h:panelGroup id="panel">
                        <ui:repeat var="item" value="#{someBean.supplies[vatId]}" id="rep2">
                            <f:subview id="sub2">
                                <h:commandLink id="command">
                                    ${item}
                                    <f:ajax
                                        event="click"
                                        render=":frmMain2:sub1:rep1:0:panel">
                                    </f:ajax>
                                </h:commandLink>
                            </f:subview>
                        </ui:repeat>
                    </h:panelGroup>
                </fieldset>
            </ui:repeat>
        </f:subview>
    </h:form>

This is running in Websphere Portlet via portlet bridge which means I am stuck with Myfaces 2.0.

The problem I am facing is that I am getting following error:

javax.portlet.PortletException: Component with id::frmMain2:sub1:rep1:0:panel not found

Notice that I am trying to reference first iteration of panel inside f:ajax render (:frmMain2:sub1:rep1:0:panel).

If I referenced something else (outside iterated part), e.g. :frmMain2:sub1:rep1, component is found and portlet works.

I am unable to find how do I reference some iterated component in render attribute.

Found following post where this problem is described as resolved in Mojarra newer version, but Myfaces 2.2.7 does not solve the problem: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

So, Is there a way to reference the component I want to render in f:ajax?

Answer 1

Since you only want to render the first iteration, you could create a custom component, tag, or template that encapsulates the components that you are iterating over as a workaround:

<fieldset>
    <legend>vatId</legend>
    <h:panelGroup id="panel">
        <ui:repeat var="item" value="#{someBean.supplies[vatId]}" id="rep2">
            <f:subview id="sub2">
                <h:commandLink id="command">
                    ${item}
                    <f:ajax
                        event="click"
                        render=":frmMain2:sub1:rep1:0:panel">
                    </f:ajax>
                </h:commandLink>
            </f:subview>
        </ui:repeat>
    </h:panelGroup>
</fieldset>

Then you could hard code the first option. Here's some example code (you'll definitely need to adapt this since I don't have all the info about your model data):

<h:form id="frmMain2">
    <f:subview id="sub1">
        <custom:component id="first" items="#{someBean.supplies[hardcodedFirstKey]}">
            <f:ajax event="click" render="@this" />
        </custom:component>
        <ui:repeat var="vatId" value="#{someBean.suppliesKeys()}" id="rep1">
            <custom:component items="#{someBean.supplies[vatId]}" rendered="#{!key eq hardcodedFirstKey}">
                <f:ajax event="click" render=":frmMain:sub1:first" />
            </custom:component>
        </ui:repeat>
    </f:subview>
</h:form>