Composite components & ID
composite-component, jsf, jsf-2
Solution
Composite components are `NamingContainer` components like `<h:form>`, `<h:dataTable>`, etc. This allows you to have multiple of them in the same view without conflicting IDs.
You need to give the composite component a fixed ID as well. E.g.
<my:composite id="someId" />
I'd also suggest to use `<div id="#{cc.id}">` instead of `<div id="element_customer">`. It will then become `someId` with the above example.
Unrelated to the concrete problem, this isn't entirely the right purpose of a composite component. A composite component is intented to be of the same kind of `<h:inputText>`, etc. You seem to rather want a tag file or maybe an include file. See also When to use <ui:include>, tag files, composite components and/or custom components?
Problem
I want to implement some javas cript into my JSF composite component, but I have problem with id. My java script with: ``` document.getElementById("myForm:customerId") ``` does not work, because the id is wrong. I have JSF composite component: ``` <composite:implementation> <div id="element_customer"> <h2 class="element_title">Customer</h2> <h:form id="myForm"> <h:inputText id="customerId" value="#{cc.attrs.customerId}"/> </h:form> </div> </composite:implementation> ``` and HTML output is: ``` <div id="element_customer"> <h2 class="element_title">Customer</h2> <form id="j_idt44:myForm" name="j_idt44:myForm" method="post" ... > <input type="hidden" name="j_idt44:myForm" value="j_idt44:myForm" /> <input id="j_idt44:myForm:customerId" ... name="j_idt44:myForm:customerId" /> </form> </div> ``` Why is "j_idt44" used in HTML output?