Search code examples
jsfelementidentifier

JSF-generated HTML element ID is changing, how to set it to a fixed element ID?

I have a JSF input text component which has an id of search. In the generated HTML output it looks like this j_idt17:search, but the number 17 is changing from time to time. How to make it to stay one?

Solution

  • Simply give the JSF component which generated the HTML element with id="j_idt17" a fixed ID.

    In your particular case, it's most likely the HTML input element's parent <form> element which is generated by the JSF <h:form> component.

    <h:form>
    <h:inputText id="search" />
</h:form>

    So, this should do:

    <h:form id="form">
    <h:inputText id="search" />
</h:form>

    This way the ID of the generated HTML <input> element will become form:search.

    The following JSF components implicitly generate an id attribute even when not set:

    • <h:form>
    • <h:dataTable>
    • <h:inputXxx>
    • <h:selectXxx>
    • <h:commandXxx>
    • <ui:repeat>
    • <cc:interface>
    • <f:subview>

    Similarly for PrimeFaces with <p:dataTable>, <p:tabView>, <p:inputXxx>, <p:selectXxx> and <p:commandXxx>.

    So you need to make sure all of these have an explicit id attribute set. This is primarily because JavaScript will otherwise not be able to find these via document.getElementById() during ajax actions. Another reason is guaranteeing the uniqueness of IDs of components declared within iterator or composite components.

    See also: