How to update a button inside a <ui:repeat>?

Asked

Viewed 20 times

-1

Let’s get to my problem. I have two <p:commandLink> inside a <ui:repeat>. These buttons simulate checkbox. Then I would like to click on them to update the specific line within the <ui:repeat> thus updating the button to be rendered. By updating a <p:outputPanel> that is above the element tree it works. The problem is that for a list with many records this update makes you go back to the top of the list, which for many records ends up being difficult when you need to add several items that are below in the list.

<tbody>
   <ui:repeat value="#{myBean.itens}" var="item" varStatus="index">
      <tr class="myCustomClass" id="item#{item.id}">
         <th>
            <p:commandLink
               rendered="#{myConditionRendered}"
               actionListener="#{myBean.deselect(item)}"
               update=":panelGroupArroundId"
               process="@this">
               <i style="font-size: 15px;" class="fa fa-check-square-o"></i>
            </p:commandLink>
            <p:commandLink
               rendered="#{!myConditionRendered}"
               actionListener="#{myBean.select(item)}"
               update=":panelGroupArroundId"
               process="@this">
               <i style="font-size: 15px;"
                  class="fa fa-square-o"></i>
            </p:commandLink>
         </th>
         <td>
            <h:outputText value="#{item.field1}"/>
         </td>
         ...                                                         
      </tr>
   </ui:repeat>
</tbody>

JSF version 2.1, Primefaces version 3.5.

jsf primefaces primefaces-3.5

1 answer

0


Putting a form and a panelGroup around the buttons solves the problem.

<tbody>
   <ui:repeat value="#{myBean.itens}" var="item" varStatus="index">
      <tr class="myCustomClass" id="item#{item.id}">
         <th>
            <h:form>
                <h:panelGroup id="idGroup">
                    <p:commandLink
                     rendered="#{myConditionRendered}"
                     actionListener="#{myBean.deselect(item)}"
                     update="idGroup"
                     process="@this">
                    <i style="font-size: 15px;" class="fa fa-check-square-o"></i>
                    </p:commandLink>
                    <p:commandLink
                     rendered="#{!myConditionRendered}"
                     actionListener="#{myBean.select(item)}"
                     update="idGroup"
                     process="@this">
                    <i style="font-size: 15px;"
                     class="fa fa-square-o"></i>
                   </p:commandLink>

                </h:panelGroup>       
            </h:form>
         </th>
         <td>
            <h:outputText value="#{item.field1}"/>
         </td>
         ...                                                         
      </tr>
   </ui:repeat>
</tbody>

Browser other questions tagged jsf primefaces primefaces-3.5

You are not signed in. Login or sign up in order to post.