Seam / RichFaces + forceId

Question

I'm having trouble with a4j:repeat and it's id generation. Every element inside the loop has it's id preceded with a unique identifier. I don't want this. I want certain elements to contain the id that I present them (I'm ensuring they're unique).

I've search around and it looks like Tomahawk tags have an attribute forceId which will cause the element to use the id provided. The only thing is, it looks like it's not recommended to use Tomahawk tags with Seam / RichFaces.

Is there anything similar in anyone of the tag libraries recommended to be used with Seam? Barring that, is it reasonably feasible for me to subclass a4j:repeat (or possibly even ui:repeat) and change the way it handles id generation?

Any ideas? All I need is a way to loop through elements giving them dynamic ids.

Answer 1

I don't know why you wouldn't let JSF do the ID generation for you, but I understand that it isn't easy to figure out, since JSF has very little documentation on this subject in my opinion.

I'll tell you my findings on this subject by giving an example (using JSF 2.0.3 Mojarra by the way):

<h:form id="myForm">
    <ui:repeat id="loopzor" var="#{myItem}" value="#{myController.myList}">
        <h:outputLabel for="myName" value="#{labels.name}:" />
        <h:inputText id="myName" value="#{myItem.name}" />
    </ui:repeat>
    <h:selectOneMenu id="type" value="#{address.type.id}">
        <f:selectItems value="#{types}" var="type" itemLabel="#{type.label}" itemValue="#{type.id}"/>
    </h:selectOneMenu>
    <h:inputText id="value" value="#{address.value}"/>
</h:form>

This is a typical example of how a form might look like. This is what happens when the page is rendered with a list size of 2 items:

<form id="myForm">
    <label for="myForm-loopzor-0-myName">Name:</label>
    <input id="myForm-loopzor-0-myName" type="text" value="someName" />
    <label for="myForm-loopzor-1-myName">Name:</label>
    <input id="myForm-loopzor-1-myName" type="text" value="someName2" />
    <select id="myForm-type" name="myForm-type>
        <option value="1" selected="selected">Label1</option>
        <option value="2" >Label2</option>
    </select>
</form>

So the ID generation is as follows:

• Give IDs to all h:form elements, this will prefix all elements in this form with this ID
  • If you don't want the form ID prefixed to each element, add the attribute prependid="false" to the h:form element
• Give IDs to all ui:repeat elements (even though the id attribute is not specified in the specs)
• Give IDs to all h:inputText and other input elements, even inside ui:repeat elements they will get a unique ID based on their position in the loop
• You can give IDs to f:selectItems elements but they will not be taken into account
• You can suffix the IDs with the varStatus object but this will always return an empty string, probably because when generating the dynamic IDs the varStatus object does not exist

I hope this can clear out some of the confusions about ID generation!

Answer 2

Maybe useful: You can get real ids in JSF (RichFaces) with #{rich:clientId('id')}. So you can use the generated id in JS.

Answer 3

This is not a RichFaces problem. It is JSF. JSF adds a unique id to each components. This is a known JSF feature.

However, there is something you can do. In your <h:form> you can set prependId="false". This will tell JSF not to add any ID's from each component.

(Also make sure you are not using s:decorate="/layout/template.xhtml because the template.xhtml and edit.xhtml will add id's of their own.

So do something like this:

<h:form prependId="false">
<a4j:repeat value="#{foo}" var="f" rowKeyVar="row">

   <h:inputText id="unique#{row}"/>
</a4j:repeat>
</h:form>

This will make the id like this: unique1 unique2 unique3 etc

Update

Seems you are right. For some reason, the id tag doesn't support this type of EL expression.

I tried the following:

<a:repeat id="table" value="#{foo}" var="k" rowKeyVar="row">
        <h:inputText id="test#{row}" value="row is #{row}" styleClass="test#{row}"/><br/>
</a:repeat>

And it produces the generated html

<input type="text" class="test0" value="row is 0" name="table:0:test" id="table:0:test">
<input type="text" class="test1" value="row is 1" name="table:1:test" id="table:1:test">
<input type="text" class="test2" value="row is 2" name="table:2:test" id="table:2:test">

So as you can see, I still get a unique id because. Probably is adding the number for me automatically.

It doesn't matter if you add or not. The result is the same.