ui:repeat using the same client id. c:foreach works fine

Question

I know this may have something to do with the phase each one comes in at.

If I do this.

 <ui:repeat id="repeatChart" varStatus="loop" value="#{viewLines.jflotChartList}" var="jflotChart">
                <p:panel>
                    <jflot:chart height="300" width="925" dataModel="#{jflotChart.dataSet}" dataModel2="#{jflotChart.dataSet2}" 
                                 xmin="#{jflotChart.startDateString}" 
                                 xmax="#{jflotChart.endDateString}"
                                 shadeAreaStart ="#{jflotChart.shadeAreaStart}"
                                 shadeAreaEnd ="#{jflotChart.shadeAreaEnd}"
                                 lineMark="#{jflotChart.wrapSpec.benchmark}" yMin="#{jflotChart.yMin}" yMax="#{jflotChart.yMax}"  />
                </p:panel>
                <br />
            </ui:repeat>     

My code will not work. Debugging the javascript shows that the same id is generated for every iteration. I've tried putting loop.index to create an id and that gives me an error saying that id can't be blank.

If I exchange the ui:repeat for a c:forEach it works fine. Debugging the javascript shows that a new id is created for each iteration.

Here is my backing code(some of it).

    <div id="#{cc.id}_flot_placeholder" style="width:#{cc.attrs.width}px;height:#{cc.attrs.height}px;">

        <script type="text/javascript">                 
       //<![CDATA[           
       $(function () {    

var placeholder = $("##{cc.id}_flot_placeholder");
var overviewPlaceholder = $("##{cc.id}_flot_overview");

The id needs to be different so the javascript can render to the correct div. I've tried explicitly defining an id attribute and then passing that as the id in the client code. Like I said before that doesn't work. Thanks for any help.

**EDIT**

Here is my problem. I can't use the clientId in the div tag because of the colon character obviously. I have modified it in javascript but how would I get that value to the div. I can't get the div tag by id because I need to generate the id. I can't seem to do a document.write() either. I'm stuck at this point.

  <composite:implementation>                

       <div id="#{cc.clientId}_flot_placeholder" style="width:400px;height:400px;">


        <script type="text/javascript">                 
       //<![CDATA[           
       $(function () {  

var clientIdOld = '#{cc.clientId}';  
var clientId = clientIdOld.replace(':', '_');
var placeholder = $('#'+clientId+'_flot_placeholder');
var overviewPlaceholder = $('#'+clientId+'_flot_overview');

Answer 1

I did a quick test on local environment (Mojarra 2.0.4 on Tomcat 7.0.11). Using #{cc.clientId} gives you an unique ID back everytime.

<ui:repeat value="#{bean.items}" var="item">
    <cc:test />
</ui:repeat>

with

<cc:implementation>
    <div id="#{cc.clientId}_foo">foo</div>
</cc:implementation>

Here's the generated HTML source:

<div id="j_idt6:0:j_idt7_foo">foo</div>
<div id="j_idt6:1:j_idt7_foo">foo</div>
<div id="j_idt6:2:j_idt7_foo">foo</div>

This should be sufficient for your functional requirement. You might only want to escape the default separator : or to replace it by a custom separator since it's a reserved character in CSS selectors.

---

Update: so you want to escape it, you should then replace : by \: and not by _.

var clientId = clientIdOld.replace(/:/g, '\\:');

(the /:/g is a regex which ensures that all occurrences will be replaced and the double slash is just to escape the slash itself in JS strings, like as you normally do in Java strings)