2

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
FelipeFraga
  • 81
  • 5

1 Answers1

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:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • First of all, thanks a lot for the help. About the part where the list might start empty, you suggested to use JSF, but when doing so, for the list to be updated I would have to call the backing bean every time. I would really like to edit the list and only post when the user is done adding and removing items. Since I now have the id, I can create li entries exactly like the the ones generated by the ui:repeat using JS, but the new entries don't seem to be posted to backing bean. Should they, or is there any issue other than creating ids with nameList:0:name, nameList:1:name and so on. – FelipeFraga Jan 07 '17 at 19:41
  • For exactly that reason you need to do it via JSF. See also http://stackoverflow.com/q/4421839 – BalusC Jan 07 '17 at 20:18