How to make an id unique on page with JSF composite components?

Question

I am making a component for the Javascript charting library called flot.

<cc:interface>        
    <cc:attribute name="data" required="true" /> 
</cc:interface>

<cc:implementation>
    <div id="placeholder" style="width:600px;height:300px;"></div>
    <script type="text/javascript"> 
        //<![CDATA[
    $(function () {       
        
      var d1 = [#{cc.attrs.data}];     

        $.plot($("#placeholder"), [ d1 ]);

    });
    //]]>
    </script>
</cc:implementation>

This is the small amount of code I have so far. The problem I have is how would I make that div tag randomly generate on a page so that I can output multiple charts. Obviously it won't do that in the current state. I would need to pass the value into the javascript function to.

I know I can just create another attribute with id required and the user would have to specify the id, but I've noticed on a lot of components that the id is not required. It seems in heavy ajax/javascript libraries like primefaces and icefaces that the ids are random some how.

Answer 1

You can get the composite component's own ID by #{cc.id}. So to ensure uniqueness, just do:

<div id="#{cc.id}_placeholder" style="width:600px;height:300px;"></div>

and

$.plot($("##{cc.id}_placeholder"), [ d1 ]);

JSF will autogenerate one if you don't specify any id attribute on the component. E.g.

<my:plot id="foo">

Here foo will be used as #{cc.id} in the composite component implementation.