2

I have one ui:repeat component and inside that ui:repeat there is one div which is using in my javascript code. I have to dynamically change this div id on each ui:repeat call. how can i make it possible?

Please find the below code for your reference.

Xhtml Code

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>

 <div id="idToChange">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

JS Code

 function loadFunction() {
     let varsome= document.getElementsById('idToChange');

     }
Anandha
  • 47
  • 10
  • 1
    How should the ids of the divs look like? Is there a field in your data that contains the desired id or should the ids just contain a prefix and a number? – jkoch Mar 19 '22 at 08:05
  • Hi jkoch, Thanks for the reply. I just only need to create an id which contains a prefix and a number. – Anandha Mar 19 '22 at 08:18

1 Answers1

2

This should be possible accessing rowStatus.index.

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>

 <div id="prefix#{rowStatus.index}">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

EDIT

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>
 <input type="checkbox" onclick="(evt)=>handleCheckboxClicked(evt,'prefix#{rowStatus.index}')" />
 <div id="prefix#{rowStatus.index}">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

function handleCheckboxClicked(evt,id){
    const div = document.getElementById(id);
    
}
jkoch
  • 766
  • 1
  • 5
  • HI jkoch, Can i call the same prefix#{rowStatus.index} id in my javascript also? – Anandha Mar 19 '22 at 08:34
  • `#{rowStatus.index}` is only valid inside the `ui:repeat` with `varStatus="rowStatus" `. What do you want to achieve in your javascript? Maybe there are easier ways. – jkoch Mar 19 '22 at 08:38
  • hi jkoch, I have a check box and there is a block of input field is associated with that, if i click on the checkbox then the block of input field will be open and if i uncheck the checkbox then it will hide. all this will done through by calling the div id. But if i replicate the the checkbox with ui:repeat then the hide and show functionality will only work for the first checkbox. (ie, hide and show functionality of the input field block will not work for the newly created checkbox ) – Anandha Mar 19 '22 at 11:44
  • 1
    If your checkbox is in the same `ui:repeat` as your div you could add `#{rowStatus.index}` to its onChange handlers parameters and in the event handler select the div with this index. – jkoch Mar 19 '22 at 12:04
  • 1
    I have updated my answer. Let me know if this fits your needs. – jkoch Mar 19 '22 at 15:12