f:ajax within nested ui:repeat

Question

I'm attempting to use ajax to rerender the container of a list of objects contained within another list of objects when a button press deletes an element of the sublist of objects. But I am unable to find the parent container of the sublist objects.

The java objects are represented as such
IE

public class Advertisements{
      List<object1> messages;
//getters setters etc.
}

public class object1{
     List<object2> stops;
}

Now I'm trying to associate a delete button with each stop (the second nested object list) and to re-render the container of these stops with f:ajax render.

IE

<h:form id="campaign" >
   <ui:repeat id="messages" var="message" value="#{Advertisements.active.messages}" >
       <h:panelGroup id="stopList"  binding="#{waga}">
            <ui:repeat id="temp" var="stop" value="#{message.stops}" >
                <div class="col-sm-2">
                    <h:outputLabel value="#{stop.name}"/>
                </div>
                <div class="col-sm-1">
                    <h:commandLink action="#{Advertisements.delete(stop)}" class="">
                        <i class="glyphicon glyphicon-remove"></i>
                        <f:ajax render=":#{waga.clientId}"/>
                    </h:commandLink>                
                </div>
            </ui:repeat>
        </h:panelGroup>
    </ui:repeat>
</h:form>

Now I've tried a couple of different permutations of the render id but I cannot figure out why I can't execute an ajax request on the panelgroup.

when using this

<h:panelGroup id="stopList"  binding="#{waga}">
#{waga.clientId}

I have been able to examine the value and it uniquely maps for each button's ajax render to the correct container id IE

for id campaign-messages-0-stopList each stop in the list references this specific integer identifier and this is consistent throughout the rest of the messages.

I can't figure out how to correctly reference this through absolute or relative ids. It only seems to work when the panelGroup is a sibling component but of course this is not the behavior that I am looking for at all I want to re-render the container of each stop to now show the list without the deleted stop.

Does anyone have any insight as to why the absolute ids aren't able to find the component or what I might be doing wrong?

Answer 1

afaik, if you remove an element from a list/array, you need to re-render the whole ui:repeat , since you cannot simply take out an iteration out of a loop.

in order to re-render the whole repeat, you can do this:

<h:form id="campaign">
    <ui:repeat id="messages" varStatus="messagesVarStatus" var="message" value="#{Advertisements.active.messages}" >
        <h:panelGroup id="stopList">
            <ui:repeat id="temp" var="stop" value="#{message.stops}" >
                <div class="col-sm-2">
                    <h:outputLabel value="#{stop.name}"/>
                </div>
                <div class="col-sm-1">
                    <h:commandLink action="#{Advertisements.delete(stop)}" class="">
                        <i class="glyphicon glyphicon-remove"></i>
                        <f:ajax render="campaign:messages:#{messagesVarStatus.index}:stopList"/>
                    </h:commandLink>                
                </div>
            </ui:repeat>
         </h:panelGroup>
    </ui:repeat>
</h:form>