You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Ron Piterman <rp...@gmx.net> on 2006/11/24 10:56:12 UTC

2nd try: ajax updating components inside a For

Hi all,
I have a simple For loop which iterates over some object.
the objects are all rendered to DirectLinks.
When a DirectLink-listener is called, the clicked Item should change to 
"edit view" and render a Form instead of the Link.
When the form is submitted, the item should render again to the Link ( 
"view mode").

Now the question is, how to change the code below, to do the trick with 
ajax.

When using normal http requests the page looks like this:

<html jwcid="@Shell" title="test">
  <body jwcid="@Body">
   <h1> try ajax with list </h1>
     <ul>
      <div
        jwcid="for@For" source="ognl:objects"
        value="ognl:currentObject">

        <li jwcid="container@Any" element="li">
          <span jwcid="@If" condition="ognl:editMode">
            <form jwcid="@Form">
              <input jwcid="@TextField" value="ognl:editObject.name"/>
              <input jwcid="ok@Submit" listener="listener:doSubmit"/>
              <input jwcid="cancel@Submit" listener="listener:doCancel"/>
            </form>
         </span>
         <span jwcid="@Else">
          <a jwcid="@DirectLink" listener="listener:edit"
                parameters="ognl:currentObject.id"
                >
            <span jwcid="@Insert" value="ognl:currentObject.name"></span>
          </a>
         </span>
        </li>
     </div>
    </ul>
  </body>
</html>

and the class:

public abstract class Home extends BasePage
{
     public Object getObjects() {
         // return the list of obejcts
     }

     /** the value of the current iteration */
     public abstract Value getCurrentObject();

     @Persist
     public abstract Value getEditObject();
     public abstract void setEditObject( Value v );

     public boolean isEditMode() {
         return getEditObject() != null &&
             getEditObject().equals( getCurrentObject() );
     }

     public void edit( Long id ) {
         setEditObject( getObject( id ) );
     }

     public void doSubmit() {
         // ... save ... and then
         this.setEditObject ( null );
     }

     public void doCancel() {
         this.setEditObject( null );
     }

     private Value getObject( Long id ) {
       // ... return the value for the given id
     }

}


Thanx in advance,
Cheers,
Ron


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: 2nd try: ajax updating components inside a For

Posted by Kim Thrysøe <kt...@atira.dk>.
After the update from Jesse, the test-page I mentioned in a previous 
thread behaves as expected. Thank you for the fix.

If anyone is interested the test page java+html is as follows:

package dk.atira.commonstest.pages;

import org.apache.tapestry.IRequestCycle;
import org.apache.tapestry.annotations.Persist;
import org.apache.tapestry.event.PageBeginRenderListener;
import org.apache.tapestry.event.PageEvent;
import org.apache.tapestry.html.BasePage;

public abstract class NumericPage 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);
    }
   
}



<div jwcid="@Shell" title="Test">
     <div jwcid="@Body" class="templatewide">
     
        <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>

    </div>
</div>


Ron Piterman wrote:
> Thanx jesse, thats great !
>
> I guess I miss some basic understanding of how for works in ajax 
> context, but I still didn't manager to update a single iteration -
>
> Currently it only works if you update the container of the for, and 
> still there are some issues with multiple posts (I added a jira issue).
>
> Would you/? explain what would be the preferred way to solve this prob 
> (updating a form inside a single iteration)?
>
> Cheers,
> Ron
>
>
>
>
> Jesse Kuhnert wrote:
>> This should work now. I'm not entirely certain it was being handled
>> correctly at the time you originally wrote this message but it works
>> now. An example to look at might be
>>
>> http://opencomponentry.com:8080/timetracker/LocaleList.htm
>>
>> On 11/24/06, Ron Piterman <rp...@gmx.net> wrote:
>>
>>> Hi all,
>>> I have a simple For loop which iterates over some object.
>>> the objects are all rendered to DirectLinks.
>>> When a DirectLink-listener is called, the clicked Item should change to
>>> "edit view" and render a Form instead of the Link.
>>> When the form is submitted, the item should render again to the Link (
>>> "view mode").
>>>
>>> Now the question is, how to change the code below, to do the trick with
>>> ajax.
>>>
>>> When using normal http requests the page looks like this:
>>>
>>> <html jwcid="@Shell" title="test">
>>>   <body jwcid="@Body">
>>>    <h1> try ajax with list </h1>
>>>      <ul>
>>>       <div
>>>         jwcid="for@For" source="ognl:objects"
>>>         value="ognl:currentObject">
>>>
>>>         <li jwcid="container@Any" element="li">
>>>           <span jwcid="@If" condition="ognl:editMode">
>>>             <form jwcid="@Form">
>>>               <input jwcid="@TextField" value="ognl:editObject.name"/>
>>>               <input jwcid="ok@Submit" listener="listener:doSubmit"/>
>>>               <input jwcid="cancel@Submit" 
>>> listener="listener:doCancel"/>
>>>             </form>
>>>          </span>
>>>          <span jwcid="@Else">
>>>           <a jwcid="@DirectLink" listener="listener:edit"
>>>                 parameters="ognl:currentObject.id"
>>>                 >
>>>             <span jwcid="@Insert" 
>>> value="ognl:currentObject.name"></span>
>>>           </a>
>>>          </span>
>>>         </li>
>>>      </div>
>>>     </ul>
>>>   </body>
>>> </html>
>>>
>>> and the class:
>>>
>>> public abstract class Home extends BasePage
>>> {
>>>      public Object getObjects() {
>>>          // return the list of obejcts
>>>      }
>>>
>>>      /** the value of the current iteration */
>>>      public abstract Value getCurrentObject();
>>>
>>>      @Persist
>>>      public abstract Value getEditObject();
>>>      public abstract void setEditObject( Value v );
>>>
>>>      public boolean isEditMode() {
>>>          return getEditObject() != null &&
>>>              getEditObject().equals( getCurrentObject() );
>>>      }
>>>
>>>      public void edit( Long id ) {
>>>          setEditObject( getObject( id ) );
>>>      }
>>>
>>>      public void doSubmit() {
>>>          // ... save ... and then
>>>          this.setEditObject ( null );
>>>      }
>>>
>>>      public void doCancel() {
>>>          this.setEditObject( null );
>>>      }
>>>
>>>      private Value getObject( Long id ) {
>>>        // ... return the value for the given id
>>>      }
>>>
>>> }
>>>
>>>
>>> Thanx in advance,
>>> Cheers,
>>> Ron
>>>
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>>
>>>
>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>


-- 
Tlf. +45 7214 6793 · kt@atira.dk · MSN: kim.thrysoe@acm.org
Atira A/S · Niels Jernes Vej 10 · 9220 Aalborg Ø · www.atira.dk


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: 2nd try: ajax updating components inside a For

Posted by Ron Piterman <rp...@gmx.net>.
Thanx jesse, thats great !

I guess I miss some basic understanding of how for works in ajax 
context, but I still didn't manager to update a single iteration -

Currently it only works if you update the container of the for, and 
still there are some issues with multiple posts (I added a jira issue).

Would you/? explain what would be the preferred way to solve this prob 
(updating a form inside a single iteration)?

Cheers,
Ron




Jesse Kuhnert wrote:
> This should work now. I'm not entirely certain it was being handled
> correctly at the time you originally wrote this message but it works
> now. An example to look at might be
> 
> http://opencomponentry.com:8080/timetracker/LocaleList.htm
> 
> On 11/24/06, Ron Piterman <rp...@gmx.net> wrote:
> 
>> Hi all,
>> I have a simple For loop which iterates over some object.
>> the objects are all rendered to DirectLinks.
>> When a DirectLink-listener is called, the clicked Item should change to
>> "edit view" and render a Form instead of the Link.
>> When the form is submitted, the item should render again to the Link (
>> "view mode").
>>
>> Now the question is, how to change the code below, to do the trick with
>> ajax.
>>
>> When using normal http requests the page looks like this:
>>
>> <html jwcid="@Shell" title="test">
>>   <body jwcid="@Body">
>>    <h1> try ajax with list </h1>
>>      <ul>
>>       <div
>>         jwcid="for@For" source="ognl:objects"
>>         value="ognl:currentObject">
>>
>>         <li jwcid="container@Any" element="li">
>>           <span jwcid="@If" condition="ognl:editMode">
>>             <form jwcid="@Form">
>>               <input jwcid="@TextField" value="ognl:editObject.name"/>
>>               <input jwcid="ok@Submit" listener="listener:doSubmit"/>
>>               <input jwcid="cancel@Submit" listener="listener:doCancel"/>
>>             </form>
>>          </span>
>>          <span jwcid="@Else">
>>           <a jwcid="@DirectLink" listener="listener:edit"
>>                 parameters="ognl:currentObject.id"
>>                 >
>>             <span jwcid="@Insert" value="ognl:currentObject.name"></span>
>>           </a>
>>          </span>
>>         </li>
>>      </div>
>>     </ul>
>>   </body>
>> </html>
>>
>> and the class:
>>
>> public abstract class Home extends BasePage
>> {
>>      public Object getObjects() {
>>          // return the list of obejcts
>>      }
>>
>>      /** the value of the current iteration */
>>      public abstract Value getCurrentObject();
>>
>>      @Persist
>>      public abstract Value getEditObject();
>>      public abstract void setEditObject( Value v );
>>
>>      public boolean isEditMode() {
>>          return getEditObject() != null &&
>>              getEditObject().equals( getCurrentObject() );
>>      }
>>
>>      public void edit( Long id ) {
>>          setEditObject( getObject( id ) );
>>      }
>>
>>      public void doSubmit() {
>>          // ... save ... and then
>>          this.setEditObject ( null );
>>      }
>>
>>      public void doCancel() {
>>          this.setEditObject( null );
>>      }
>>
>>      private Value getObject( Long id ) {
>>        // ... return the value for the given id
>>      }
>>
>> }
>>
>>
>> Thanx in advance,
>> Cheers,
>> Ron
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>>
> 
> 


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: 2nd try: ajax updating components inside a For

Posted by Jesse Kuhnert <jk...@gmail.com>.
This should work now. I'm not entirely certain it was being handled
correctly at the time you originally wrote this message but it works
now. An example to look at might be

http://opencomponentry.com:8080/timetracker/LocaleList.htm

On 11/24/06, Ron Piterman <rp...@gmx.net> wrote:
> Hi all,
> I have a simple For loop which iterates over some object.
> the objects are all rendered to DirectLinks.
> When a DirectLink-listener is called, the clicked Item should change to
> "edit view" and render a Form instead of the Link.
> When the form is submitted, the item should render again to the Link (
> "view mode").
>
> Now the question is, how to change the code below, to do the trick with
> ajax.
>
> When using normal http requests the page looks like this:
>
> <html jwcid="@Shell" title="test">
>   <body jwcid="@Body">
>    <h1> try ajax with list </h1>
>      <ul>
>       <div
>         jwcid="for@For" source="ognl:objects"
>         value="ognl:currentObject">
>
>         <li jwcid="container@Any" element="li">
>           <span jwcid="@If" condition="ognl:editMode">
>             <form jwcid="@Form">
>               <input jwcid="@TextField" value="ognl:editObject.name"/>
>               <input jwcid="ok@Submit" listener="listener:doSubmit"/>
>               <input jwcid="cancel@Submit" listener="listener:doCancel"/>
>             </form>
>          </span>
>          <span jwcid="@Else">
>           <a jwcid="@DirectLink" listener="listener:edit"
>                 parameters="ognl:currentObject.id"
>                 >
>             <span jwcid="@Insert" value="ognl:currentObject.name"></span>
>           </a>
>          </span>
>         </li>
>      </div>
>     </ul>
>   </body>
> </html>
>
> and the class:
>
> public abstract class Home extends BasePage
> {
>      public Object getObjects() {
>          // return the list of obejcts
>      }
>
>      /** the value of the current iteration */
>      public abstract Value getCurrentObject();
>
>      @Persist
>      public abstract Value getEditObject();
>      public abstract void setEditObject( Value v );
>
>      public boolean isEditMode() {
>          return getEditObject() != null &&
>              getEditObject().equals( getCurrentObject() );
>      }
>
>      public void edit( Long id ) {
>          setEditObject( getObject( id ) );
>      }
>
>      public void doSubmit() {
>          // ... save ... and then
>          this.setEditObject ( null );
>      }
>
>      public void doCancel() {
>          this.setEditObject( null );
>      }
>
>      private Value getObject( Long id ) {
>        // ... return the value for the given id
>      }
>
> }
>
>
> Thanx in advance,
> Cheers,
> Ron
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>


-- 
Jesse Kuhnert
Tapestry/Dojo/(and a dash of TestNG), team member/developer

Open source based consulting work centered around
dojo/tapestry/tacos/hivemind. http://blog.opencomponentry.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org