Tapestry5: Page with structure like page-loop-customComponent-form does not work

Question

Hi All!

I have the following situation: I have Page which activated in some context (for example "/page/ctx1") I have component DayJournalItem which inserted in page via t:loop

<div t:type="Loop" t:source="journalDays" t:value="journalDay"
    t:encoder="dayEncoder"><t:DayJournalItem day="journalDay"
    cacheContainer="cacheContainer" /></div>

And DayJournalItem have another loop with other component ActivityJournalItem which has form

<div xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"&gt;
<t:zone t:id="dayAjaxZone" update="show">
    <div class="dayHeader">${dayHeader}</div>   <div class="dayBody">
    <div t:type="Loop" t:source="activities" t:value="activity"><t:ActivityJournalItem
        activity="activity" cacheContainer="cacheContainer" /></div>
    </div>
</t:zone></div>

ActivityJournalItem component

<div xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"&gt;
<t:zone t:id="activityAjaxZone" update="show">
    <t:if test="${editingActivity}">
        <div class="activityEditFormBody">
        <form t:type="form" t:id="activityForm" t:zone="activityAjaxZone">
....
        <input t:id="Save" t:type="Submit" value="Save" />
        <input t:id="Cancel" t:type="Submit" value="Cancel" />
        </form>
        </div>
    </t:if>
    <t:if test="${!editingActivity}">
        <div>viewing activity: ${activity.id}</div>
    </t:if>
</t:zone></div>

The problem is - when I'm pressing submit button NullPointerException appearing. All fields in my custom component are null. It seems that Tapestry is unable to restore context correctly. You can look at screenshoot here: http://my.jetscreenshot.com/2672/20100807-tbfe-235kb.jpg

I think I missing some parameters in form, loop or somewhere. And cant figure out what is wrong. By the way, I tried to use encoders, but Tapestry dont event call for them - it seems that they work only inside form. But I have form inside loop. So any help is greatly appreciated.

p.s. If you need more details you can look at full source code (at google code): http://code.google.com/p/tasks-journal/source/checkout

UPD: I found that I can pass t:context to form and in onPrepareForSubmit phase I can restore fields manually (via pretty dirty work-around). Well, no NPE now, but: 1. This is ugly; 2. This is do not leads to form rerender. No Exceptions and no rerender as expected. I inspected HTTP response there is only empty brackets = "{}"

UPD2: I still playing with bad workaround. I figured out that if I in onSuccess will "return this;" then rerender will occur. But (!) it always rerender first form (or zone?) on the page. http://my.jetscreenshot.com/2672/20100808-thdx-190kb.jpg

Answer 1

Restoring the state manually of the component manually via t:context is the correct approach. Encoders can only help you if the loop is inside a form; in your case it is the other way around.

I suspect the Zones you're rendering all have the same ID on the client side, hence the content of the first one is replaced. You may have to manually assign IDs to your Zones like this:

<t:zone t:id="dayAjaxZone" id="dayAjaxZone${dayIndex}" update="show">

Answer 2

Answere was finally found.

1. Add id="something${counter}" to the zone activityAjaxZone

2. Reference this zone by this id (html dom id) not tapestry id

And it will work.

Thank to Josh, who helped with answer: http://markmail.org/message/3lmnwybswwm7lhjm