You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Muhammad Gelbana <m....@gmail.com> on 2012/03/08 23:28:47 UTC
AjaxFormLoop markup\ajax inconsistency
Hello all !
I've been writing a component using the sweet ajax for loop and it worked
exactly as I wanted it to but now I need to make a modification that seems
to be a bit harder than expected !
First I used to loop over <tr> elements (i.e. <tr
t:type="ajaxformloop"..etc). But now I need a row to be added within each
loop so I did the following:
<tr>
<th>Minutes</th>
<th>Hours</th>
<th>Days</th>
<th>Months</th>
<th>Week days</th>
<th style="border-color: white; background-color: white;"></th>
</tr>
<t:ajaxformloop t:id="schedulingRows" t:source="schedulingRows"
t:value="schedulingRow" t:encoder="schedulingRowEncoder">
<tr>
<td style="text-align: center; vertical-align: top;" colspan="5">
Active:
<t:checkbox t:value="schedulingRow.active" />
<hr />
E-mail(s):
<t:TextArea t:value="schedulingRow.emails" />
</td>
</tr>
<tr>
<td t:type="loop" t:source="schedulingFields" t:value="fieldType">
At:
<t:select t:model="model" t:value="dummyAt" t:blankOption="NEVER"
t:mixins="AjaxRequest" t:serverEventToAdd="addIndividual"
t:serverEventToDel="delIndividual"
t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
t:rowIndex="schedulingRowIndex"
t:fieldType="${fieldType}"
t:extraElementsValues="${fieldType}Every_${schedulingRowIndex}"
style="margin-left: 22px;" />
<a href="#"
onclick="addIndividual_${fieldType}_${schedulingRowIndex}.updateZone();return
false;" class="scheduleUpdateCtrl">+</a>
/
<a href="#"
onclick="delIndividual_${fieldType}_${schedulingRowIndex}.updateZone();return
false;" class="scheduleUpdateCtrl">-</a>
<hr />
From:
<t:select t:model="model" t:value="dummyFrom" t:blankOption="NEVER"
ajxid="${fieldType}IntervalFrom_${schedulingRowIndex}"
style="margin-left: 4px;" />
<br />
To:
<t:select t:model="model" t:value="dummyTo" t:blankOption="NEVER"
t:mixins="AjaxRequest" t:serverEventToAdd="addInterval"
t:serverEventToDel="delInterval"
t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
t:rowIndex="schedulingRowIndex"
t:fieldType="${fieldType}"
t:extraElementsValues="${fieldType}IntervalFrom_${schedulingRowIndex},${fieldType}Every_${schedulingRowIndex}"
style="margin-left: 20px;" />
<a href="#"
onclick="addInterval_${fieldType}_${schedulingRowIndex}.updateZone();return
false;" class="scheduleUpdateCtrl">+</a>
/
<a href="#"
onclick="delInterval_${fieldType}_${schedulingRowIndex}.updateZone();return
false;" class="scheduleUpdateCtrl">-</a>
<br />
Every:
<t:select t:model="everyModel" t:id="every" t:blankOption="NEVER"
ajxid="${fieldType}Every_${schedulingRowIndex}" t:mixins="AjaxRequest"
t:serverEventToAdd="addEvery" t:serverEventToDel="delEvery"
t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
t:rowIndex="schedulingRowIndex" t:fieldType="${fieldType}" />
<a href="#"
onclick="addEvery_${fieldType}_${schedulingRowIndex}.updateZone();return
false;" class="scheduleUpdateCtrl">+</a>
/
<a href="#"
onclick="delEvery_${fieldType}_${schedulingRowIndex}.updateZone();return
false;" class="scheduleUpdateCtrl">-</a>
<hr />
<t:zone id="${fieldType}Pattern_${schedulingRowIndex}" t:update="show"
style="float: left;">${pattern}</t:zone>
</td>
<td style="text-align: right; border-color: white;">
<t:removerowlink>
<img src="images/remove.png" />
</t:removerowlink>
</td>
</tr>
<p:addRow>
<td colspan="6" style="text-align: right; border-color: white;">
<t:addrowlink>
<img src="images/add.png" />
</t:addrowlink>
</td>
</p:addRow>
</t:ajaxformloop>
It renders as expected when the page is first loaded, but the add\remove
rows buttons are working on a totally different zone ! It's even out of the
table embracing the mentioned template.
The zone being acted on by the ajax buttons is:
*
*
*<div class="t-forminjector" id="rowInjector_135f46bbcc7"
style="background-image: none; background-color: rgba(0, 0, 0, 0);
">...</div>*
Can someone guide me to my mistake here ?
Thanks.
--
*Regards,*
*Muhammad Gelbana
Java Developer*
Re: AjaxFormLoop markup\ajax inconsistency
Posted by Muhammad Gelbana <m....@gmail.com>.
*Solved*
<t:ajaxformloop t:id="schedulingRows" t:source="schedulingRows"
t:value="schedulingRow" t:encoder="schedulingRowEncoder" *t:element="tbody"*
>
* <tr>*
<td style="text-align: center; vertical-align: top;" colspan="5">
Active:
<t:checkbox t:value="schedulingRow?.active" />
<hr />
E-mail(s):
<t:TextArea t:value="schedulingRow?.emails" />
</td>
* </tr>*
* <tr>.....</tr>*
<p:addRow>
<td colspan="6" style="text-align: right; border-color: white;">
<t:addrowlink>
<img src="images/add.png" />
</t:addrowlink>
</td>
</p:addRow>
</t:ajaxformloop>
On Fri, Mar 9, 2012 at 12:30 AM, Muhammad Gelbana <m....@gmail.com>wrote:
> Let me add what really confuses me, when I refresh the page, it's renders
> very well but again the ajax buttons behaves in the same, acting on a whole
> another zone.
>
>
> On Fri, Mar 9, 2012 at 12:28 AM, Muhammad Gelbana <m....@gmail.com>wrote:
>
>> Hello all !
>>
>> I've been writing a component using the sweet ajax for loop and it worked
>> exactly as I wanted it to but now I need to make a modification that seems
>> to be a bit harder than expected !
>> First I used to loop over <tr> elements (i.e. <tr
>> t:type="ajaxformloop"..etc). But now I need a row to be added within each
>> loop so I did the following:
>>
>> <tr>
>> <th>Minutes</th>
>> <th>Hours</th>
>> <th>Days</th>
>> <th>Months</th>
>> <th>Week days</th>
>> <th style="border-color: white; background-color: white;"></th>
>> </tr>
>> <t:ajaxformloop t:id="schedulingRows" t:source="schedulingRows"
>> t:value="schedulingRow" t:encoder="schedulingRowEncoder">
>> <tr>
>> <td style="text-align: center; vertical-align: top;" colspan="5">
>> Active:
>> <t:checkbox t:value="schedulingRow.active" />
>> <hr />
>> E-mail(s):
>> <t:TextArea t:value="schedulingRow.emails" />
>> </td>
>> </tr>
>> <tr>
>> <td t:type="loop" t:source="schedulingFields" t:value="fieldType">
>> At:
>> <t:select t:model="model" t:value="dummyAt" t:blankOption="NEVER"
>> t:mixins="AjaxRequest" t:serverEventToAdd="addIndividual"
>> t:serverEventToDel="delIndividual"
>> t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
>> t:rowIndex="schedulingRowIndex"
>> t:fieldType="${fieldType}"
>> t:extraElementsValues="${fieldType}Every_${schedulingRowIndex}"
>> style="margin-left: 22px;" />
>> <a href="#"
>> onclick="addIndividual_${fieldType}_${schedulingRowIndex}.updateZone();return
>> false;" class="scheduleUpdateCtrl">+</a>
>> /
>> <a href="#"
>> onclick="delIndividual_${fieldType}_${schedulingRowIndex}.updateZone();return
>> false;" class="scheduleUpdateCtrl">-</a>
>> <hr />
>> From:
>> <t:select t:model="model" t:value="dummyFrom" t:blankOption="NEVER"
>> ajxid="${fieldType}IntervalFrom_${schedulingRowIndex}"
>> style="margin-left: 4px;" />
>> <br />
>> To:
>> <t:select t:model="model" t:value="dummyTo" t:blankOption="NEVER"
>> t:mixins="AjaxRequest" t:serverEventToAdd="addInterval"
>> t:serverEventToDel="delInterval"
>> t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
>> t:rowIndex="schedulingRowIndex"
>> t:fieldType="${fieldType}"
>> t:extraElementsValues="${fieldType}IntervalFrom_${schedulingRowIndex},${fieldType}Every_${schedulingRowIndex}"
>> style="margin-left: 20px;" />
>> <a href="#"
>> onclick="addInterval_${fieldType}_${schedulingRowIndex}.updateZone();return
>> false;" class="scheduleUpdateCtrl">+</a>
>> /
>> <a href="#"
>> onclick="delInterval_${fieldType}_${schedulingRowIndex}.updateZone();return
>> false;" class="scheduleUpdateCtrl">-</a>
>> <br />
>> Every:
>> <t:select t:model="everyModel" t:id="every" t:blankOption="NEVER"
>> ajxid="${fieldType}Every_${schedulingRowIndex}" t:mixins="AjaxRequest"
>> t:serverEventToAdd="addEvery" t:serverEventToDel="delEvery"
>> t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
>> t:rowIndex="schedulingRowIndex" t:fieldType="${fieldType}" />
>> <a href="#"
>> onclick="addEvery_${fieldType}_${schedulingRowIndex}.updateZone();return
>> false;" class="scheduleUpdateCtrl">+</a>
>> /
>> <a href="#"
>> onclick="delEvery_${fieldType}_${schedulingRowIndex}.updateZone();return
>> false;" class="scheduleUpdateCtrl">-</a>
>> <hr />
>> <t:zone id="${fieldType}Pattern_${schedulingRowIndex}" t:update="show"
>> style="float: left;">${pattern}</t:zone>
>> </td>
>> <td style="text-align: right; border-color: white;">
>> <t:removerowlink>
>> <img src="images/remove.png" />
>> </t:removerowlink>
>> </td>
>> </tr>
>> <p:addRow>
>> <td colspan="6" style="text-align: right; border-color: white;">
>> <t:addrowlink>
>> <img src="images/add.png" />
>> </t:addrowlink>
>> </td>
>> </p:addRow>
>> </t:ajaxformloop>
>>
>> It renders as expected when the page is first loaded, but the add\remove
>> rows buttons are working on a totally different zone ! It's even out of the
>> table embracing the mentioned template.
>> The zone being acted on by the ajax buttons is:
>> *
>> *
>> *<div class="t-forminjector" id="rowInjector_135f46bbcc7"
>> style="background-image: none; background-color: rgba(0, 0, 0, 0);
>> ">...</div>*
>>
>> Can someone guide me to my mistake here ?
>>
>> Thanks.
>> --
>> *Regards,*
>> *Muhammad Gelbana
>> Java Developer*
>>
>>
>
>
> --
> *Regards,*
> *Muhammad Gelbana
> Java Developer*
>
>
--
*Regards,*
*Muhammad Gelbana
Java Developer*
Re: AjaxFormLoop markup\ajax inconsistency
Posted by Muhammad Gelbana <m....@gmail.com>.
Let me add what really confuses me, when I refresh the page, it's renders
very well but again the ajax buttons behaves in the same, acting on a whole
another zone.
On Fri, Mar 9, 2012 at 12:28 AM, Muhammad Gelbana <m....@gmail.com>wrote:
> Hello all !
>
> I've been writing a component using the sweet ajax for loop and it worked
> exactly as I wanted it to but now I need to make a modification that seems
> to be a bit harder than expected !
> First I used to loop over <tr> elements (i.e. <tr
> t:type="ajaxformloop"..etc). But now I need a row to be added within each
> loop so I did the following:
>
> <tr>
> <th>Minutes</th>
> <th>Hours</th>
> <th>Days</th>
> <th>Months</th>
> <th>Week days</th>
> <th style="border-color: white; background-color: white;"></th>
> </tr>
> <t:ajaxformloop t:id="schedulingRows" t:source="schedulingRows"
> t:value="schedulingRow" t:encoder="schedulingRowEncoder">
> <tr>
> <td style="text-align: center; vertical-align: top;" colspan="5">
> Active:
> <t:checkbox t:value="schedulingRow.active" />
> <hr />
> E-mail(s):
> <t:TextArea t:value="schedulingRow.emails" />
> </td>
> </tr>
> <tr>
> <td t:type="loop" t:source="schedulingFields" t:value="fieldType">
> At:
> <t:select t:model="model" t:value="dummyAt" t:blankOption="NEVER"
> t:mixins="AjaxRequest" t:serverEventToAdd="addIndividual"
> t:serverEventToDel="delIndividual"
> t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
> t:rowIndex="schedulingRowIndex"
> t:fieldType="${fieldType}"
> t:extraElementsValues="${fieldType}Every_${schedulingRowIndex}"
> style="margin-left: 22px;" />
> <a href="#"
> onclick="addIndividual_${fieldType}_${schedulingRowIndex}.updateZone();return
> false;" class="scheduleUpdateCtrl">+</a>
> /
> <a href="#"
> onclick="delIndividual_${fieldType}_${schedulingRowIndex}.updateZone();return
> false;" class="scheduleUpdateCtrl">-</a>
> <hr />
> From:
> <t:select t:model="model" t:value="dummyFrom" t:blankOption="NEVER"
> ajxid="${fieldType}IntervalFrom_${schedulingRowIndex}"
> style="margin-left: 4px;" />
> <br />
> To:
> <t:select t:model="model" t:value="dummyTo" t:blankOption="NEVER"
> t:mixins="AjaxRequest" t:serverEventToAdd="addInterval"
> t:serverEventToDel="delInterval"
> t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
> t:rowIndex="schedulingRowIndex"
> t:fieldType="${fieldType}"
> t:extraElementsValues="${fieldType}IntervalFrom_${schedulingRowIndex},${fieldType}Every_${schedulingRowIndex}"
> style="margin-left: 20px;" />
> <a href="#"
> onclick="addInterval_${fieldType}_${schedulingRowIndex}.updateZone();return
> false;" class="scheduleUpdateCtrl">+</a>
> /
> <a href="#"
> onclick="delInterval_${fieldType}_${schedulingRowIndex}.updateZone();return
> false;" class="scheduleUpdateCtrl">-</a>
> <br />
> Every:
> <t:select t:model="everyModel" t:id="every" t:blankOption="NEVER"
> ajxid="${fieldType}Every_${schedulingRowIndex}" t:mixins="AjaxRequest"
> t:serverEventToAdd="addEvery" t:serverEventToDel="delEvery"
> t:targetZone="${fieldType}Pattern_${schedulingRowIndex}"
> t:rowIndex="schedulingRowIndex" t:fieldType="${fieldType}" />
> <a href="#"
> onclick="addEvery_${fieldType}_${schedulingRowIndex}.updateZone();return
> false;" class="scheduleUpdateCtrl">+</a>
> /
> <a href="#"
> onclick="delEvery_${fieldType}_${schedulingRowIndex}.updateZone();return
> false;" class="scheduleUpdateCtrl">-</a>
> <hr />
> <t:zone id="${fieldType}Pattern_${schedulingRowIndex}" t:update="show"
> style="float: left;">${pattern}</t:zone>
> </td>
> <td style="text-align: right; border-color: white;">
> <t:removerowlink>
> <img src="images/remove.png" />
> </t:removerowlink>
> </td>
> </tr>
> <p:addRow>
> <td colspan="6" style="text-align: right; border-color: white;">
> <t:addrowlink>
> <img src="images/add.png" />
> </t:addrowlink>
> </td>
> </p:addRow>
> </t:ajaxformloop>
>
> It renders as expected when the page is first loaded, but the add\remove
> rows buttons are working on a totally different zone ! It's even out of the
> table embracing the mentioned template.
> The zone being acted on by the ajax buttons is:
> *
> *
> *<div class="t-forminjector" id="rowInjector_135f46bbcc7"
> style="background-image: none; background-color: rgba(0, 0, 0, 0);
> ">...</div>*
>
> Can someone guide me to my mistake here ?
>
> Thanks.
> --
> *Regards,*
> *Muhammad Gelbana
> Java Developer*
>
>
--
*Regards,*
*Muhammad Gelbana
Java Developer*