CODEWITHSUNDEEP
jsf-2el
Basit
Basit

Reputation: 8606

How to dynamically generate id in dataTable using ui:repeat tag

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

Upvotes: 2

Views: 10257

Answers (4)

Armen Nkrtchyan
Armen Nkrtchyan

Reputation: 1

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

Upvotes: -1

Stefan
Stefan

Reputation: 117

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.

Upvotes: 2

BalusC
BalusC

Reputation: 1108632

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>

Upvotes: 10

Matt Handy
Matt Handy

Reputation: 30025

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, ...

Upvotes: 4

Related Questions