Search code examples
ajaxjsfuirepeatclientid

How to address a component inside a looping naming container

I have the following structure (contents and attributes omitted):

<ui:repeat id="outerlist">
    <my:compositeComponent id="myCC">
        <h:panelgroup id="container">
            Some content here (outputText, etc.)
            <ui:repeat id="innerlist">
               <h:commandButton>
                   <f:ajax render=":#{cc.clientId}:container" />

<!-- all closing tags accordingly -->

As the content inside the container depends on the action of the innerlist's button, I need to update it. The approach as shown above works, when there is no outer ui:repeat. However, it fails with a component not found error when there is one.

This is seems due to the fact that the cc.clientId then itself contains the row index of the outer ui:repeat, e.g. outerlist:0:myCC:container. As a comment to this answer indicates, this indexed ID is not available in the server-side representation of the view tree. Instead "the row index only exist at client side". I must admit I do not quite understand how this indexing is done and what is available at the server side.

So my question is: How does JSF do this indexing, how does it (on the server) separate different "instances" inside a ui:repeat and is there a solution for what I am trying to achieve with the above code?

Solution

  • The client ID as specified in <f:ajax> must be available in both the server side by JSF's

    facesContext.getViewRoot().findComponent(clientId);

    (so that it could be found in order to render its new HTML representation for the ajax response)

    and in the client side by JavaScript's

    document.getElementById(clientId);

    (so that it could be updated/replaced by JS once the ajax response with new HTML content has arrived)

    As the <ui:repeat> runs during view render time only, the client ID with the row index does not represent a valid component in server side ("Cannot find component..." error from findComponent()), but it does represent a valid HTML element in the client side. Basically, you'd need the client ID without the row index for the server side and the one with the row index for the client side. But that just won't work for <ui:repeat> as it's (unfortunately) not possible to select the component tree state of a specific iteration round by alone findComponent().

    It should work fine when using JSTL <c:forEach> and dynamically assigning component ID as it runs during view build time and also actually generates multiple fullworthy JSF components in the view tree instead of only one which is re-used multiple times during render.

    <c:forEach varStatus="loop">
    <my:compositeComponent id="myCC">
        <h:panelGroup id="container_#{loop.index}">
            Some content here (outputText, etc.)
            <ui:repeat id="innerlist_#{loop.index}">
               <h:commandButton>
                   <f:ajax render=":#{cc.clientId}:container_#{loop.index}" />

    This has however its own implications, certainly when used with composite components and also when used in nested loops. Your code is not complete enough to give insight and advice about that. It would for example break when this piece of code is placed in a composite component which is by itself also reused multiple times in a render time loop.

    See also: