0

I'm trying to create a <p:diagram> with elements which contain input fields, but the problem is that for each added element, the name and ID are the same for each input field.

What I've tried to do to give each field a unique id is adding a bean-generated ID for each element, but this just gets omitted in the final code. Here's my EL/xhtml:

<p:diagram value="#{Controller.model}" style="height:600px;width:1500px" styleClass="ui-widget-content" var="lrvEl" scrollable="true">
<f:facet name="element">
    <div onmouseleave="nodeOnMouseOut(this)" onclick="nodeOnClick(this)">
        <h:outputText value="#{lrvEl.title}" style="display:block;margin-top:1em;width:100%;height:10px;padding-left:4px"/>
        <h:outputText value="#{lrvEl.description}" style="display:block;margin-top:1em;width:100%;height:10px;padding-left:4px"/>
        <h:inputText id="inputEpValue_#{lrvEl.id}" name="inputEpValue_#{lrvEl.id}" onchange="setScoreVal('#{lrvEl.id}', this)" rendered="#{lrvEl.isScore()}" style="display:block;margin-top:1em;height:10px;padding-left:4px">
        </h:inputText>
    </div>
</f:facet>

<p:ajax event="connect" listener="#{Controller.onConnect}" />
<p:ajax event="disconnect" listener="#{Controller.onDisconnect}" />
<p:ajax event="connectionChange" listener="#{Controller.onConnectionChange}" />
</p:diagram>

The important bit here is the <h:inputText id='inputEpValue_#{lrvEl.id}' ... > - this comes out on the page as the following: 

editor:LRVContent:overlayForm_lm:inputEpValue

as if the value wasn't set, however, as you can see in the onchange field I use the same constellation. This gets rendered as onchange="setScoreVal('ep:2', this)" so that works.

Can I not dynamically set IDs for elements in this fashion? Is there another way?

Edit: The actual Reason I want to do this is that, if I have more than one input with the same generated ID, the focus(/cursor) will automatically jump into the last generated input field when I click on any one of them, meaning I won't be able to actually change the value of any of those fields.

Wep0n
  • 392
  • 3
  • 15
  • You can indeed not set ids render time. But most likely you do not need to set the id, use https://stackoverflow.com/questions/18988331/how-to-get-id-of-current-component-in-el and use that in the other attributes. – Kukeltje Dec 07 '17 at 15:32
  • No, see, I do need to set the ID. When you have multiple inputs on a HTML page all with the same ID, what happens when you click in any one of those inputs, it'll make your cursor jump into the last generated input which isn't very helpful. I should edit my question. – Wep0n Dec 08 '17 at 06:29
  • For this ypu still don't need explicit Id's. Ypu can do this with classes too – Kukeltje Dec 08 '17 at 07:33
  • Ah yeah, I did that and it works, thanks. I'd still much rather be able to set the ID for fomalities sake, having 20 inputs with the same ID just doesnt seem... right. – Wep0n Dec 08 '17 at 09:24

0 Answers0