Compound Components & ID

Question

I want to implement some javas cript in my JSF component, but I have problem with id. My java script with:

document.getElementById("myForm:customerId") 

does not work because id is wrong. I have a composite JSF 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:

 <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 the HTML output?

Answer 1

Component components are NamingContainer components such as <h:form> , <h:dataTable> , etc. This allows you to have several of them in the same view without conflicting identifiers.

You also need to specify the component as a fixed ID. For example.

 <my:composite id="someId" /> 

I also suggest using <div id="#{cc.id}"> instead of <div id="element_customer"> . Then it will be someId with the example above.

---

Unrelated to a specific problem, this is not the correct goal of a composite component. The component component is of the same type <h:inputText> , etc. You most likely need a tag file or possibly an include file. See Also When to use <ui: include>, tag files, composite components and / or custom components?