How to dynamically generate id in dataTable using

Question

I am using ui:repeat tag which render images. I have five images i want that on each iteration my image get ids like image1, image2, image3.... imagen. I tried this but it is not working.

<div id="imageGallery">
    <ui:repeat value="#{countryPages_Setup.images}" var="image" varStatus="status">
        <tr>
            <td>
                <a href="javascript:void()" class="launchLink">
                    <p:graphicImage id="image#{status.index}"         //problem
                                    value="/resources/images/#{image}"
                                    width="100"
                                    height="100"
                                    rendered="#{countryPages_Setup.renderImages}"/>
                </a>
            </td>
        </tr>
    </ui:repeat>
</div>

I also tried {staus.index + 1}. I also tried id= image#{1++} But it is also not working. How can i do it?

Thanks

Answer 1

You can use EL in the id attribute, but it has to be available during view build time. The <ui:repeat> however runs during view render time, it will reuse the same <p:graphicImage> to generate multiple HTML <img> elements. It doesn't run during view build time, so the id remains image.

If you replace <ui:repeat> by <c:forEach>, then it'll work as you intented. The <c:forEach> runs during view build time and it will generate multiple <p:graphicImage> components which will then each get rendered only once.

<div id="imageGallery">
    <c:forEach items="#{countryPages_Setup.images}" var="image" varStatus="status">
        <tr>
            <td>
                <a href="javascript:void()" class="launchLink">
                    <p:graphicImage id="image#{status.index}"
                                    name="images/#{image}"
                                    width="100"
                                    height="100"
                                    rendered="#{countryPages_Setup.renderImages}"/>
                </a>
            </td>
        </tr>
    </c:forEach>
</div>

Answer 2

You cannot use el expressions within the id attribute. It needs to be static. The ui:repeat itself generates a prefix to your id. You don't need to care about uniqueness.

So, for instance if you have an id="image", then the generated ids are

somePrefix:0:image, somePrefix:1:image, ...

Answer 3

But you can use variable in Javascript, for example:

<h:graphicImage ... onclick="top.location.href='http://blabla.com/imageclicked?id=#{status.index}'"/>

You can also use Variables with event handlers (since JSF 2.0):

<h:commandLink ... action="#{myBean.imageClicked(status.index)"/>

But your loop with c:forEach can cause problems. Be aware that the JSTL tags (everything that begins with c:) are not fully compatible to JSF. If you have luck, then they work as expected. But anyways the slow down the rendering engine, since the page gets processed multiple times by the JSF and JSP rendering engine.

Better use ui:repeat.

Answer 4

Just change <ui:repeat> to <c:forEach>