Control generated ID of ui:repeat

Question

Sorry for the simple question. I am learning to use JSF 2.2 to create a form and trying to keep it close to plain HTML5 as possible. I have an ui:repeat generated list that goes like this:

<ul id="nameLst">
    <ui:repeat var="d" value="#{controller.names}" varStatus="status">
        <li>
            <input
                jsf:id="nameTxt"
                jsf:binding="#{nameTxt}"
                jsf:value="#{d}"
                type="hidden" />#{d}
        </li>
    </ui:repeat>
</ul>

It gets rendered like this:

<ul id="nameLst">
    <li>
        <input id="j_idt14:0:nameTxt" name="j_idt14:0:nameTxt" value="Name1" type="hidden">
        Name1
    </li>
    <li>
        <input id="j_idt14:1:nameTxt" name="j_idt14:1:nameTxt" value="Name2" type="hidden">
        Name2
    </li>
</ul>

Now, I am trying to add names using JavaScript only to this list. Problem is, how can I control this generated id, so I can use it in JavaScript. And mainly, if the list starts empty, how do I generate this id so it can be correctly posted back to the managed bean.

Answer 1

how can I control this generated id, so I can use it in JavaScript

Just give it a fixed id.

<ui:repeat id="names" ...>

Alternatively, use jsfc attribute to turn <ul> into an <ui:repeat>.

<ul id="names" jsfc="ui:repeat" value="#{bean.names}" var="name">
    <li>
        <input jsf:id="name" type="hidden" value="#{name}" />
    </li>
</ul>

---

And mainly, if the list starts empty, how do I generate this id so it can be correctly posted back to the managed bean

Use JSF for this instead of JS. An example can be found here: How to dynamically add JSF components

See also:

• How can I know the id of a JSF component so I can use in Javascript
• JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used