dynamically creating selectManyCheckbox with tooltip

Question

I have a HashMap in the backing bean and I want to dynamically render multiple select box. Here is the code:

    <h:selectManyCheckbox
      id="id"
      value="#{backingBean.value}"
      layout="pageDirection"
      styleClass="label"
      required="true"
      requiredMessage="You must select at least...">


      <a4j:repeat var="aGroup" items="#{backingBean.map}">

        <f:selectItem id="role#{aGroup.value.property1}" itemLabel="#{aGroup.value.property1}" itemValue="#{aGroup.value.property2}" />

        <rich:tooltip for="role" value="#{aGroup.value.property5}" />

     </a4j:repeat>

    </h:selectManyCheckbox> 

It is not rendering. Using the f:selectItems tag, it is rendering, but I need to manually create the f:selecteItem as I have to attach a rich:tooltip with each f:selectItem.

Any ideas ?

Ravi

Answer 1

Use <c:forEach> instead of <a4j:repeat>.

First add this namespace at the top of your page.

xmlns:c="http://java.sun.com/jstl/core"

Now replace <a4j:repeat..... with this.

<c:forEach var="aGroup" items="#{backingBean.map}">

EDIT:

---

I don't think that <rich:toolTip> can be applied to <f:selectItem>. As a weird hack you can do something like this.

This is your managed-bean which returns the list or a map. Here I'm using a map because it seems you are using a map.

public class MyBean {
  private Map<Integer, String> map;

  public Map<Integer, String> getMap() {
    map = new HashMap<Integer, String>();
    map.put(1, "Tool tip 1");
    map.put(2, "Tool tip 2");
    map.put(3, "Tool tip 3");
    return map;
  }
}

Now your xhtml code would be like this. Here I'm rendering selectItems dynamically. However this is not necessary for this to work.

<h:form id="myForm">
    <h:selectManyCheckbox id="myChkBox" layout="pageDirection" styleClass="label" required="true" requiredMessage="You must select at least...">
        <c:forEach var="aGroup" items="#{myBean.map}">
            <f:selectItem itemValue="someValue1" itemLabel="someValue1" id="someId#{aGroup.key}" /> 
            <span class="rich-tool-tip" id="span#{aGroup.key}" style="z-index: 99; visibility: visible; display: none;">
                <span>#{aGroup.value}</span>
            </span>
            <script>
                var i = !i ? 0 : i;
                new ToolTip("span#{aGroup.key}","myForm:myChkBox:" + i,{'showEvent':'mouseover'} );
                i++;
            </script>
        </c:forEach>
    </h:selectManyCheckbox>
    <rich:toolTip rendered="false"/>
</h:form>

That is it...
Note the <rich:toolTip> which is set as rendered="false". This is required. Otherwise some important JS parts are not imported and your toolTip will not work.