(5.4-beta-6) How to update a Zone inside a loop?

Question

I have a loop that displays numerous components including a Zone. All all these components are inside a Form component.

Each iteration of this loop, shows a Select component that shows a Zone when the Select component's value is changed (i.e. VALUE_CHANGED event is triggered and the zone is updated).

When this loop has more than one iteration, for instance 2, I have 2 Select components but whether the first or second iteration's Select component's value is changed, only one Zone is updated, which was shown in the first iteration.

Let me rephrase if I wasn't clear. Assume you have a loop that displays a Select and a Zone component. Each loop displays what I'll call, a page section. How can each Select component update the Zone in the same section using Ajax ? (The trick is about knowing the zone's ID to be able to update it)

Answer 1

Try this

<t:loop source="objects" value="object">
  <t:select t:id="select" model="model" value="value" zone="${zoneId}"></t:select>
  <t:zone t:id="zone" id="${zoneId}"></t:zone>
</t:loop>


@InjectComponent
private Zone zone;

public String getZoneId() {
   return "zone_" + object.getId(); // unique identifier
}

public void onValueChangedFromSelect() {
   ajaxresponseRenderer.addRender(zone); // now the correct zone will be updated
}