Update a repeater with AJAX in JSF

Question

I'm trying to update a repeater list with AJAX based on this : How to re-render <ui:repeat> using <f:ajax render>

But the HTML list is not updated after the first load, even if the ArrayList in the ManagedBean is.

Here is what I have in my xHTML file :

<h:form>
   <h:panelGroup id="messages">
       <a4j:repeat var="mes" value="#{talking.listMessages}">
          <h:outputText value="#{mes.sendTime}">
             <f:convertDateTime type="date" pattern="dd-MM-yyyy HH:mm"/>                                
          </h:outputText>
          #{mes.content}
       </a4j:repeat> 
   </h:panelGroup>
   <a4j:commandLink action="#{talking.testAdd}">
      <h:outputText value="Add Item" />
      <f:ajax execute="@form" render="messages" />
   </a4j:commandLink>
</h:form>

In the MB I did this simple action :

private ArrayList<Message> listMessages;

public void testAdd() {
  this.listMessages.add(new Message(/* [...] */));
}

Did I miss something ?

Try replacing your `a4j` tags with built-in jsf and facelet ones. I think `ui:repeat` and `h:commandLink` will do the same work. Apart from that I can't see what's going wrong here because your case is very similar to the referenced one. — Aritz, Jan 15 '13 at 20:57
Also check that your backing bean is not being rebuilt with the initial values when you perform the ajax request. — Aritz, Jan 15 '13 at 20:58

score 2 · Accepted Answer · answered Jan 15 '13 at 22:35

Check the RichFaces documentation about <a4j:commandLink>:

The component is similar to the JavaServer Faces (JSF) component, except that it includes plugged-in Ajax behavior.

Knowing this, the problem is that <f:ajax> doesn't work with <a4j:commandLink>. You should rewrite your code to this:

<h:form>
   <h:panelGroup id="messages">
       <a4j:repeat var="mes" value="#{talking.listMessages}">
          <h:outputText value="#{mes.sendTime}">
             <f:convertDateTime type="date" pattern="dd-MM-yyyy HH:mm"/>
          </h:outputText>
          #{mes.content}
       </a4j:repeat>
   </h:panelGroup>
   <a4j:commandLink action="#{talking.testAdd}"
      render="messages">
      <h:outputText value="Add Item" />
   </a4j:commandLink>
</h:form>

Also, make sure you're managed bean is @ViewScoped.

You are right, I mixed too much AJAX components. It works, thank you. — Arthur, Jan 17 '13 at 13:29

Update a repeater with AJAX in JSF

1 Answers1