Best way to replace c:forEach with JSF tag

Question

We are upgrading from jsf 1.2 to jsf 2. We are using apache myfaces 2.1 and rich faces 4.3.

Below is the xhtml code :

 <h:form>
<h:panelGroup id="myMenu_type">

    <div id="myMenu">
         <ul>
        <c:forEach items="#{bean.data}" var="val">
                 <li>
                    <h:commandLink value="#{val.label}" action="#{val.performAction}"/>                                                                                                                    
                 </li>
        </c:forEach>
         </ul>   
     </div>
 </h:panelGroup>
</h:form>

I am getting duplicate id error for above xhtml code . Generated anchor link tag <a> gets duplicate id for above code.

My question is , I want to get rid of c:forEach since I suspect that it is giving this duplicate id error as I am mixing JSTL and JSF.

What is the best JSF way to replace above construct ? I am trying it out with rich:dataTable. Is there any better alternative available ? Please advice. Strange part is that with same code , above issue is not observed for JSF 1.2.

EDIT 1 :

I have tried using <rich:list> as well as <a4j:repeat> Below is the xhtml code

    <div id="myMenu">
                     <rich:list value="#{bean.data}" var="val">
                        #{val}
                     </rich:list>
         </div>

The strange thing is that when i print #{val} , it gives me value as javax.faces.component.UIViewRoot@28d0bbac whereas val is a normal custom object. Because of above issue , i cannot call any method on val , it gives Property 'xx' not found on type javax.faces.component.UIViewRoot error. Above error is not observed when <c:forEach> is used.

EDIT 2 :

I am attaching the generated html for the above xhtml code which gives a clear idea of where duplicate id error is coming.

 <tr><td>

  <span id="form:myMenu_type">
    <a href="#" onclick="return myfaces.oam.submitForm(id1);">One</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id2);">Two</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id3);">Three</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id4);">Four</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id5);">Five</a>
    <a href="#" onclick="return myfaces.oam.submitForm(id6);">Six</a>
                <div id="myMenu">
                            <ul>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id1);">One</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id2);">Two</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id3);">Three</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id4);">Four</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id5);">Five</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id6);">Six</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id7);">Seven</a>
                                    </li>
                                    <li ><a href="#" onclick="return myfaces.oam.submitForm(id8);">Eight</a>
                                    </li>                               
                           </ul>
                    </div>
  </span>       
</td></tr>

So as shown in above code , the anchor link tag <a> generated right below form:myMenu_type is the real issue. Its id is exactly the sameas one generated inside <li> - which is the correct one since i am using <li> explicitely. Why are anchor tags are getting generated is the real issue. Even if I dynamically assign ids inside <c:forEach> , same gets assigned to <a> links above giving same duplicate id error. I have used dummy ids to just explain the issue. Actual ids are dynamic ids generated by myFaces

It looks more like a bug in MyFaces. there were a few issues like that in Mojarra implementation, it might be similar situation with MyFaces. Try different (latest) version of MyFaces. If possible try Mojarra implementation just to check if the issue is caused by something specific in JSF impl. — Andrey
@Andrey:Thanks for comments.Out of the two issues mentioned above , javax.faces.component.UIViewRoot@28d0bbac print and wrong html markup , which is the issue you are talking about ? — Atul
About the wrong markup, that h:commandLink generates <a> element twice. — Andrey
@Andrey:I replaced h:commandLink with a4j:commandLink and duplicate id issue is not observed now. Thanks for your help — Atul

Victor D. Castillo Victor D. Castillo · Accepted Answer · 2014-01-29T00:33:09

Use ui:repeat of JSF

example:

<ui:repeat value="#{productMB.products}" var="product">
<table class="cart">
  <tr>
    <td class="image">
      <div id="image_container">
        <img title="#{product.type} #{product.mark} #{product.family} #{product.subfamily} #{product.model} #{product.partNumber}" src="#{product.imageURL}"/>
      </div>        
    </td>
  </tr>
</table>
</ui:repeat>

Best way to replace c:forEach with JSF tag

1 Answers