Getting Reference To CheckBox From ui:repeat In JavaScript Code

Question

I have the following code snippet in a JSF 2.0 application:

<ui:repeat var="applicantTypes" value="#{lookupHelper.applicantTypes}">
    <h:selectBooleanCheckbox styleClass="applicantType"
        value="#{requestBeanDtoProxyMB.requestInstance.subsidyRequest.
        applicantTypesMap[applicantTypes.id]}">

    </h:selectBooleanCheckbox>
</ui:repeat>

The list applicantTypes is fetched from the database, and the HashMap applicantTypesMap has the data type Map<long, boolean> where the key is the id from applicantTypes

The code depends on a list that fetches values from a database, and it contains 3 items (the database contains 3 records only)

What I would like to do is get a reference to one of these 3 items so I can hide it using JavaScript based on a certain condition. I know how to hide the UI element using JavaScript using it's id, my problem is that the id is generated dynamically so I can't possibly use it to hide the checkbox

So is there a way to get a reference to this checkbox in JavaScript code? Or is there a way to hide this checkbox without needing its id to do so?

Just give those components a fixed ID. Then client IDs are 100% predictable. — BalusC, Sep 01 '16 at 07:47
@BalusC I checked and the IDs were generated dynamically, is it even possible to give a fixed ID to n items? The number of CheckBoxes generated is based on the number of rows in the database table, which is prone to changes. This is why I need to use ui:repeat, and therefore (as far as I know) can't give fixed IDs to these CheckBoxes — Ahmed Anwar, Sep 01 '16 at 15:24
Why would you give multiple elements the same ID? That's illegal in HTML. The ui:repeat will therefore add the iteration index in a fully predictable way. Better yet is to just use a style class as answered in duplicate. — BalusC, Sep 01 '16 at 16:05
I did end up using a style class, I didn't see the duplicate, though? I got the answer from the accepted answer on this question — Ahmed Anwar, Sep 06 '16 at 10:14

Rami.Q · Accepted Answer · 2016-08-31T23:23:56.923

What I would like to do is get a reference to one of these 3 items so I can hide it using JavaScript based on a certain condition.

there are many ways to hide a html element using JSF itself or javascript/JQuery!

JSF-Components have an attribute named "rendered", use it if it fits your needs.

to hide an Element using JavaScript/Jquery, you only need to add a style-class to that Element, then use JQuery class Selector to manage that element (or you do that with plain JavaScript):

<ui:repeat var="applicantTypes" value="#{lookupHelper.applicantTypes}">
    <h:selectBooleanCheckbox styleClass="applicantType SOME-CLASS#{applicantTypes.id}"
        value="#{requestBeanDtoProxyMB.requestInstance.subsidyRequest.
        applicantTypesMap[applicantTypes.id]}">

    </h:selectBooleanCheckbox>
</ui:repeat>

Look at this styleClass="applicantType SOME-CLASS#{applicantTypes.id}" this will prints(example) ...class="applicantType SOME-CLASS1"...

now using JQuery to hide that element:

$('.SOME-CLASS1').hide();

I will try this, thanks! – Ahmed Anwar Sep 01 '16 at 15:24 — Ahmed Anwar, Sep 01 '16 at 15:24
This worked for me, thank you – Ahmed Anwar Sep 06 '16 at 10:13 — Ahmed Anwar, Sep 06 '16 at 10:13

Getting Reference To CheckBox From ui:repeat In JavaScript Code

1 Answers1