Getting Reference To CheckBox From ui:repeat In JavaScript Code [duplicate]

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
– BalusC, Commented Sep 1, 2016 at 7: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
– Ahmed Anwar, Commented Sep 1, 2016 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
– BalusC, Commented Sep 1, 2016 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
– Ahmed Anwar, Commented Sep 6, 2016 at 10:14

Rami.Q · Accepted Answer · 2016-08-31 23:23:56Z

1

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();

edited Aug 31, 2016 at 23:23

answered Aug 31, 2016 at 23:18

Rami.Q

2,4763 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ahmed Anwar Over a year ago

I will try this, thanks!

Ahmed Anwar Over a year ago

This worked for me, thank you

Collectives™ on Stack Overflow

Getting Reference To CheckBox From ui:repeat In JavaScript Code [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related