Composite components & ID

Question

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?

Answer 1

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?