Question

I am trying to generate div tags dynamically depending on the number of items, contained in the ‘deviceSel’ from the backing beans. For each of the div tag, I am populating it by calling the ‘generateSparkLine’ function that is present in a JS file – ‘Reports_Cap’. I need to pass the id of the iv tag for the function to populate the data in the corresponding ‘div’ tag.

In my current code, the divs get created with the same id and hence, the same portion gets populated onclick. Could someone help me with a way to dynamically assign ids to the div tags from the JSF file? Also, div tag is not letting me use the “onload” event and that is the reason I am using the “onclick”. How could I go about modifying it so that I could get the div tags populated when the page opens up?

<div>
    <ui:repeat var="deviceSel" value="#{reportViewproto.selectedDevices}">
        <h:outputText value="#{deviceSel}" />
        <div id="chartDiv" style="width:600px; height:400px;" onclick="Reports_Cap.generateSparkLine('chartDiv', 'generateSparkLine')"></div>
        <br />
   </ui:repeat>
</div>

Answer 1

Several ways.

If the JS generateSparkLine() function is under your control and you’re actually using the id to get the element from the document by ID, then just get rid of id attribute and replace the onclick by

onclick="Reports_Cap.generateSparkLine(this, 'generateSparkLine')"

This way you don’t need the ID. You already have the element as 1st argument in the function.

---

Or if it is not under your control and/or you don’t use it to obtain the element by ID and you’re using Facelets 2.x, then introduce a loop counter by varStatus attribute of <ui:repeat> and suffix the ID values with it.

<div>
    <ui:repeat var="deviceSel" value="#{reportViewproto.selectedDevices}" varStatus="loop">
        <h:outputText value="#{deviceSel}" />
        <div id="chartDiv_#{loop.index}" style="width:600px; height:400px;" onclick="Reports_Cap.generateSparkLine('chartDiv_#{loop.index}', 'generateSparkLine')"></div>
        <br />
   </ui:repeat>
</div>

If you are still on Facelets 1.x, your best bet is JSTL <c:forEach> which also supports a varStatus attribute the same way, with the only difference that it runs during view build time, not during view render time and thus you won’t be able to use it in another UIData component.