How can I set an id to id h:commandLink from a c:forEach in order to be accesed by JS?

Question

In a project with JSF 1.1 with Apache Trinidad, I need to create several dynamic h:commandLink, and they need to be accessed by JS in order to be clicked on loading.

What I have is this for js:

    var cardsSize = window.document.getElementById("miForm:cardsSize").value;
    for(var i = 0; i <= cardsSize; i++){    
        setTimeout(function(){
            var buttonCard = window.document.getElementById("miForm:buttonCard_"+i);
            buttonCard.click();
        }, 1000);
    }

And what I have in .jsp is:

<c:forEach var = "i" begin="0" varStatus="index" end="#{pageFlowScope.cardsSize}">
    <h:commandLink id="buttonCard_#{index.index}"
        style="display:none" 
        action="#{confirmBacking.generateDocument}"
        onclick="document.forms['miForm'].target='_blank';">
            <f:setPropertyActionListener target="#{confirmBacking.indexCard}" value="#{index}" />
    </h:commandLink>
</c:forEach>

The problem is that when I create the commandLink with c:forEach, using a dynamic id ends in According to TLD or attribute directive in tag file, attribute "[id]" does not accept any expressions

Other solutions for c:forEach or ui:repeat to create several commandLink with different params implies not to have and id, but I need ids since JS does not have other way to access these objects as far as I know.

Answer 1

You can use a css class selector instead:

<h:commandLink styleClass="buttonCard_#{index.index}"

and get each button by:

document.getElementsByClassName("buttonCard_"+i)