You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Paulo Ramos <pa...@multicert.com> on 2007/05/30 12:24:05 UTC
Tables, Forms and Ajax
Hi,
I have a table with a DirectLink's that must get more information
from the corresponding line and show them in that line. I am trying to
do that with ajax but the response is rendered inside the corresponding
tag and the id is incremented.
Example: when i try to update the tag with id=2 from line 2 this is
rendered like that:
<div id="2">
<div id="3">
bla bla bla
</div
</div>
When i tried something more simple that i found in a previous post i
get the same problem. When i click the second line the response is
rendered inside the <tr> tag including another <tr> like this:
<tr id="therow_0">
<tr id="therow_1">
<td> 8330 </td>
<td>
<a id="DirectLink_1" href="/eLoja/tables/TesteAjaxFor,$DirectLink.sdirect?sp=2&updateParts=therow_1">
Update "therow_1" </a>
</td>
</tr>
</tr>
<tr id="For_1"/>
....
</tr>
Can anyone help me?
Thaks,
Paulo Ramos
My example code:
TesteAjaxFor.html :
------------------------------------------------
<html>
<head><title>Teste Tabela</title></head>
<body jwcid="@Border">
<div id="content">
<div id="head_formulario">
<div class="head_form">Listagem</div>
</div>
<br>
<center>
<table border="1" cellpadding="5">
<tr jwcid="@For" source="ognl:rows" value="ognl:row"
index="ognl:theIndex">
<tr jwcid="therow@Any">
<td>
<span jwcid="@Insert" value="ognl:row"> </span>
</td>
<td>
<a jwcid="@DirectLink"
listener="listener:aListener"
async="true"
parameters="ognl:{theIndex}"
updateComponents="ognl:components.therow.clientId">
Update "<span jwcid="@Insert"
value="ognl:components.therow.clientId"> </span>"
</a>
</td>
</tr>
</tr>
</table>
</center>
<div id="botao">
</div>
</div>
</body>
</html>
TesteAjaxFor.java :
-----------------------------------------------
public abstract class TesteAjaxFor extends BasePage implements
PageBeginRenderListener {
@Persist
public abstract String[] getRows();
public abstract void setRows(String[] rows);
public abstract String getRow();
public abstract int getTheIndex();
public void pageBeginRender(PageEvent e)
{
if (getRows() == null){
setRows(new String[] {"foo", "bar", "baz"});
}
}
public void aListener(IRequestCycle cycle, int idx)
{
getRows()[idx] = "" + (int)(Math.random()*10000);
}
}
Re: Tables, Forms and Ajax
Posted by Paulo Ramos <pa...@multicert.com>.
My original code:
---------------------------------------
Html :
<form jwcid="form">
<table jwcid="Tabela" >
<td class="lineWithBorderNoWrap" nowrap="nowrap"
jwcid="accaoColumnValue">
<a href="" jwcid="MoreInfoLink">More Info</a>
<div jwcid="MoreInfoAjax">
</div>
</td>
</table>
</form>
---------------------------------------
Page :
<component id="Tabela" type="Contrib:Table">
<binding name="source" value="list"/>
<binding name="columns" value="literal: id:Id:id,
nome:Nome:nome, !accao:Accao:accao"/>
<binding name="row" value="ognl:currentLinha"/>
<binding name="keyExpression" value="literal:id"/>
</component>
<component id="form" type="Form" />
<component id="accaoColumnValue" type="Block" />
<component id="MoreInfoLink" type="DirectLink" >
<binding name="listener" value="listener:onMostrar" />
<binding name="parameters" value="currentLinha.id" />
<binding name="updateComponents"
value="'MoreInfoAjax'+components.Tabela.tableRow.id"/>
<binding name="async" value="ognl:true" />
</component>
<component id="MoreInfoAjax" type="Any" >
<binding name="id"
value="'MoreInfoAjax'+components.Tabela.tableRow.id" />
</component>
-----------------------------------
When i click "More Info" from line 2 it render like that:
<td id="informal_14" class="accaoColumnValue">
<a id="MoreInfoLink_1" href="/eLoja/tables/CheckboxTestPage3,MoreInfoLink.sdirect?sp=2&updateParts=MoreInfoAjax2">More
Info</a>
<div id="MoreInfoAjax2">
<div id="MoreInfoAjax3"/>
</div>
</td>
Paulo Ramos
Re: Tables, Forms and Ajax
Posted by Jesse Kuhnert <jk...@gmail.com>.
No I'm not sure based on the data given. I have an application running
with almost the exact same setup and everything is working fine. I noticed
that you are setting your rows property on each render - is it consistent ?
Perhaps something is getting confused about changing state.
I would suggest looking into doing some debugging to see what is / isn't
happening :
http://tapestry.apache.org/tapestry4.1/ajax/debugging.html
On 5/30/07, Paulo Ramos <pa...@multicert.com> wrote:
>
> Thanks, but i just want to update data within a td element. The "tr
> update " is just an example. I tried update data within a div inside a
> td element and it didn't work.
>
> Any ideas?
>
> Paulo Ramos
>
> Jesse Kuhnert escreveu:
> > Even if you were somehow able to make it work the way you wanted that
> > particular application would never work in IE. IE won't allow you to
> > update
> > tr elements like that - you can update data within a td element but
> > that's
> > about it.
> >
> > On 5/30/07, Paulo Ramos <pa...@multicert.com> wrote:
> >>
> >> Hi,
> >>
> >> I have a table with a DirectLink's that must get more information
> >> from the corresponding line and show them in that line. I am trying to
> >> do that with ajax but the response is rendered inside the corresponding
> >> tag and the id is incremented.
> >> Example: when i try to update the tag with id=2 from line 2 this is
> >> rendered like that:
> >> <div id="2">
> >> <div id="3">
> >> bla bla bla
> >> </div
> >> </div>
> >>
> >> When i tried something more simple that i found in a previous post
> i
> >> get the same problem. When i click the second line the response is
> >> rendered inside the <tr> tag including another <tr> like this:
> >>
> >> <tr id="therow_0">
> >> <tr id="therow_1">
> >> <td> 8330 </td>
> >> <td>
> >> <a id="DirectLink_1"
> >>
> href="/eLoja/tables/TesteAjaxFor,$DirectLink.sdirect?sp=2&updateParts=therow_1">
> >>
> >> Update "therow_1" </a>
> >> </td>
> >> </tr>
> >> </tr>
> >> <tr id="For_1"/>
> >> ....
> >> </tr>
> >>
> >> Can anyone help me?
> >>
> >> Thaks,
> >>
> >> Paulo Ramos
> >>
> >> My example code:
> >>
> >> TesteAjaxFor.html :
> >> ------------------------------------------------
> >> <html>
> >> <head><title>Teste Tabela</title></head>
> >> <body jwcid="@Border">
> >>
> >> <div id="content">
> >>
> >> <div id="head_formulario">
> >> <div class="head_form">Listagem</div>
> >> </div>
> >> <br>
> >> <center>
> >>
> >> <table border="1" cellpadding="5">
> >>
> >> <tr jwcid="@For" source="ognl:rows" value="ognl:row"
> >> index="ognl:theIndex">
> >> <tr jwcid="therow@Any">
> >> <td>
> >> <span jwcid="@Insert" value="ognl:row"> </span>
> >> </td>
> >> <td>
> >> <a jwcid="@DirectLink"
> >> listener="listener:aListener"
> >> async="true"
> >> parameters="ognl:{theIndex}"
> >>
> >> updateComponents="ognl:components.therow.clientId
> >> ">
> >> Update "<span jwcid="@Insert"
> >> value="ognl:components.therow.clientId"> </span>"
> >> </a>
> >> </td>
> >> </tr>
> >> </tr>
> >>
> >> </table>
> >>
> >>
> >> </center>
> >> <div id="botao">
> >> </div>
> >> </div>
> >> </body>
> >> </html>
> >>
> >>
> >>
> >> TesteAjaxFor.java :
> >> -----------------------------------------------
> >> public abstract class TesteAjaxFor extends BasePage implements
> >> PageBeginRenderListener {
> >>
> >> @Persist
> >> public abstract String[] getRows();
> >> public abstract void setRows(String[] rows);
> >>
> >> public abstract String getRow();
> >> public abstract int getTheIndex();
> >>
> >> public void pageBeginRender(PageEvent e)
> >> {
> >> if (getRows() == null){
> >> setRows(new String[] {"foo", "bar", "baz"});
> >> }
> >> }
> >>
> >> public void aListener(IRequestCycle cycle, int idx)
> >> {
> >> getRows()[idx] = "" + (int)(Math.random()*10000);
> >> }
> >>
> >> }
> >>
> >>
> >>
> >
> >
>
>
>
--
Jesse Kuhnert
Tapestry/Dojo team member/developer
Open source based consulting work centered around
dojo/tapestry/tacos/hivemind. http://blog.opencomponentry.com
Re: Tables, Forms and Ajax
Posted by Paulo Ramos <pa...@multicert.com>.
Thanks, but i just want to update data within a td element. The "tr
update " is just an example. I tried update data within a div inside a
td element and it didn't work.
Any ideas?
Paulo Ramos
Jesse Kuhnert escreveu:
> Even if you were somehow able to make it work the way you wanted that
> particular application would never work in IE. IE won't allow you to
> update
> tr elements like that - you can update data within a td element but
> that's
> about it.
>
> On 5/30/07, Paulo Ramos <pa...@multicert.com> wrote:
>>
>> Hi,
>>
>> I have a table with a DirectLink's that must get more information
>> from the corresponding line and show them in that line. I am trying to
>> do that with ajax but the response is rendered inside the corresponding
>> tag and the id is incremented.
>> Example: when i try to update the tag with id=2 from line 2 this is
>> rendered like that:
>> <div id="2">
>> <div id="3">
>> bla bla bla
>> </div
>> </div>
>>
>> When i tried something more simple that i found in a previous post i
>> get the same problem. When i click the second line the response is
>> rendered inside the <tr> tag including another <tr> like this:
>>
>> <tr id="therow_0">
>> <tr id="therow_1">
>> <td> 8330 </td>
>> <td>
>> <a id="DirectLink_1"
>> href="/eLoja/tables/TesteAjaxFor,$DirectLink.sdirect?sp=2&updateParts=therow_1">
>>
>> Update "therow_1" </a>
>> </td>
>> </tr>
>> </tr>
>> <tr id="For_1"/>
>> ....
>> </tr>
>>
>> Can anyone help me?
>>
>> Thaks,
>>
>> Paulo Ramos
>>
>> My example code:
>>
>> TesteAjaxFor.html :
>> ------------------------------------------------
>> <html>
>> <head><title>Teste Tabela</title></head>
>> <body jwcid="@Border">
>>
>> <div id="content">
>>
>> <div id="head_formulario">
>> <div class="head_form">Listagem</div>
>> </div>
>> <br>
>> <center>
>>
>> <table border="1" cellpadding="5">
>>
>> <tr jwcid="@For" source="ognl:rows" value="ognl:row"
>> index="ognl:theIndex">
>> <tr jwcid="therow@Any">
>> <td>
>> <span jwcid="@Insert" value="ognl:row"> </span>
>> </td>
>> <td>
>> <a jwcid="@DirectLink"
>> listener="listener:aListener"
>> async="true"
>> parameters="ognl:{theIndex}"
>>
>> updateComponents="ognl:components.therow.clientId
>> ">
>> Update "<span jwcid="@Insert"
>> value="ognl:components.therow.clientId"> </span>"
>> </a>
>> </td>
>> </tr>
>> </tr>
>>
>> </table>
>>
>>
>> </center>
>> <div id="botao">
>> </div>
>> </div>
>> </body>
>> </html>
>>
>>
>>
>> TesteAjaxFor.java :
>> -----------------------------------------------
>> public abstract class TesteAjaxFor extends BasePage implements
>> PageBeginRenderListener {
>>
>> @Persist
>> public abstract String[] getRows();
>> public abstract void setRows(String[] rows);
>>
>> public abstract String getRow();
>> public abstract int getTheIndex();
>>
>> public void pageBeginRender(PageEvent e)
>> {
>> if (getRows() == null){
>> setRows(new String[] {"foo", "bar", "baz"});
>> }
>> }
>>
>> public void aListener(IRequestCycle cycle, int idx)
>> {
>> getRows()[idx] = "" + (int)(Math.random()*10000);
>> }
>>
>> }
>>
>>
>>
>
>
Re: Tables, Forms and Ajax
Posted by Jesse Kuhnert <jk...@gmail.com>.
Even if you were somehow able to make it work the way you wanted that
particular application would never work in IE. IE won't allow you to update
tr elements like that - you can update data within a td element but that's
about it.
On 5/30/07, Paulo Ramos <pa...@multicert.com> wrote:
>
> Hi,
>
> I have a table with a DirectLink's that must get more information
> from the corresponding line and show them in that line. I am trying to
> do that with ajax but the response is rendered inside the corresponding
> tag and the id is incremented.
> Example: when i try to update the tag with id=2 from line 2 this is
> rendered like that:
> <div id="2">
> <div id="3">
> bla bla bla
> </div
> </div>
>
> When i tried something more simple that i found in a previous post i
> get the same problem. When i click the second line the response is
> rendered inside the <tr> tag including another <tr> like this:
>
> <tr id="therow_0">
> <tr id="therow_1">
> <td> 8330 </td>
> <td>
> <a id="DirectLink_1"
> href="/eLoja/tables/TesteAjaxFor,$DirectLink.sdirect?sp=2&updateParts=therow_1">
> Update "therow_1" </a>
> </td>
> </tr>
> </tr>
> <tr id="For_1"/>
> ....
> </tr>
>
> Can anyone help me?
>
> Thaks,
>
> Paulo Ramos
>
> My example code:
>
> TesteAjaxFor.html :
> ------------------------------------------------
> <html>
> <head><title>Teste Tabela</title></head>
> <body jwcid="@Border">
>
> <div id="content">
>
> <div id="head_formulario">
> <div class="head_form">Listagem</div>
> </div>
> <br>
> <center>
>
> <table border="1" cellpadding="5">
>
> <tr jwcid="@For" source="ognl:rows" value="ognl:row"
> index="ognl:theIndex">
> <tr jwcid="therow@Any">
> <td>
> <span jwcid="@Insert" value="ognl:row"> </span>
> </td>
> <td>
> <a jwcid="@DirectLink"
> listener="listener:aListener"
> async="true"
> parameters="ognl:{theIndex}"
> updateComponents="ognl:components.therow.clientId
> ">
> Update "<span jwcid="@Insert"
> value="ognl:components.therow.clientId"> </span>"
> </a>
> </td>
> </tr>
> </tr>
>
> </table>
>
>
> </center>
> <div id="botao">
> </div>
> </div>
> </body>
> </html>
>
>
>
> TesteAjaxFor.java :
> -----------------------------------------------
> public abstract class TesteAjaxFor extends BasePage implements
> PageBeginRenderListener {
>
> @Persist
> public abstract String[] getRows();
> public abstract void setRows(String[] rows);
>
> public abstract String getRow();
> public abstract int getTheIndex();
>
> public void pageBeginRender(PageEvent e)
> {
> if (getRows() == null){
> setRows(new String[] {"foo", "bar", "baz"});
> }
> }
>
> public void aListener(IRequestCycle cycle, int idx)
> {
> getRows()[idx] = "" + (int)(Math.random()*10000);
> }
>
> }
>
>
>
--
Jesse Kuhnert
Tapestry/Dojo team member/developer
Open source based consulting work centered around
dojo/tapestry/tacos/hivemind. http://blog.opencomponentry.com