You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Paul Stanton <pa...@gunnsoft.com.au> on 2007/05/03 17:01:19 UTC

simple ajax text update help please

Hi All,

I'm trying to do something very basic with ajax. I simply want a value 
to increment when an onchange event is triggered for another component. 
The listener is being called via ajax etc. but I cannot get my component 
to update. I understand I'm missing the logic which identifies and 
updates the component, but have no idea where I need to do it, or what I 
need to do.

I have my counter component 'AjaxCount' and my page 'AjaxDemo'. 
Hopefully the code explains what I'm trying to do:

The error I'm getting:
"No node could be found to update content in with id counter"

AjaxCount.html:

<h1>Update Count</h1>
<p><span jwcid="@Insert" value="ognl:count">5</span></p>

AjaxCount.java:

@ComponentClass(allowInformalParameters = false)
public abstract class AjaxCount extends ApplicationComponent
{
    private int count;

    public int getCount()
    {
        return count;
    }

    public void setCount(int count)
    {
        this.count = count;
    }

    public void increment()
    {
        setCount(getCount() + 1);
    }
}

AjaxDemo.java:

public abstract class AjaxDemo extends ApplicationPage implements 
PageBeginRenderListener
{
    @InjectComponent("counter")
    public abstract AjaxCount getCounter();

    @EventListener(targets = "A", events = "onchange", submitForm = "form")
    public void changeA(IRequestCycle cycle)
    {
        System.out.println("changeA()");
        modelB = this.getModelB();
        AjaxCount counter = getCounter();
        counter.increment();
        cycle.getResponseBuilder().updateComponent("B");
        cycle.getResponseBuilder().updateComponent("counter");
    }
...
}

AjaxDemo.html:

...
<span jwcid="counter@AjaxCount"/>
...


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


Re: simple ajax text update help please

Posted by Jesse Kuhnert <jk...@gmail.com>.
You have to know what the id is of the component to update. The id can come
in the form

-) jwcid="myComponentId@ComponentType"
-) id="myInformalComponentId"
-) <component id="MyId" type="ComponentType">

Then.....the part that isn't always obvious is that the server doesn't
actually know what is rendered. It can't or no one would ever be able to
scale their web apps beyond simple in-house usages. So no, I can't tell what
is rendered...But you can by doing a "view->source" on your rendered html
page and seeing if you see any html elements with an id attribute matching
(or starting with) the id that you are giving to updateComponents("id");

As another good example just look at the source of the demo page here :

http://opencomponentry.com:8080/timetracker/Home.html

You'll see javascript at the bottom doing things like "dojo.byId("Submit")"
. ...That script works only because higher up in the page there is a
rendered element looking like:

<input type="submit" name="Submit" id="Submit" value="add"
class="submitButton" />


So - if you can't see the element tapestry can't update it.

On 5/6/07, Paul Stanton <pa...@gunnsoft.com.au> wrote:
>
> Not sure that helps .. you can see my html files so you should be able
> to tell what is rendered. my question is what other registration do I
> have to perform to be able to utilise the updateComponent method? How do
> I identify my node etc.
>
> Thanks in advance
>
> Jesse Kuhnert wrote:
> > I probably need to add a ResponseBuilder.insertComponents() call pretty
> > soon, but the basic reason why it's not updating is because the
> "counter"
> > and "B" elements probably don't exist on your rendered page already.
> > For it
> > to update them it needs an element that it can find with something
> simple
> > like this javascript:
> >
> > document.getElementById("counter")
> >
> > This is usually solved by doing something like:
> >
> > <span jwcid="updateArea@Any" >
> >  <countercomponent here/>
> > </span>
> >
> > You also shouldn't need to specify which form to submit (in 4.1.2 at
> > least).
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>


-- 
Jesse Kuhnert
Tapestry/Dojo team member/developer

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

Re: simple ajax text update help please

Posted by Paul Stanton <pa...@gunnsoft.com.au>.
Not sure that helps .. you can see my html files so you should be able 
to tell what is rendered. my question is what other registration do I 
have to perform to be able to utilise the updateComponent method? How do 
I identify my node etc.

Thanks in advance

Jesse Kuhnert wrote:
> I probably need to add a ResponseBuilder.insertComponents() call pretty
> soon, but the basic reason why it's not updating is because the "counter"
> and "B" elements probably don't exist on your rendered page already. 
> For it
> to update them it needs an element that it can find with something simple
> like this javascript:
>
> document.getElementById("counter")
>
> This is usually solved by doing something like:
>
> <span jwcid="updateArea@Any" >
>  <countercomponent here/>
> </span>
>
> You also shouldn't need to specify which form to submit (in 4.1.2 at 
> least).


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


Re: simple ajax text update help please

Posted by Jesse Kuhnert <jk...@gmail.com>.
I probably need to add a ResponseBuilder.insertComponents() call pretty
soon, but the basic reason why it's not updating is because the "counter"
and "B" elements probably don't exist on your rendered page already. For it
to update them it needs an element that it can find with something simple
like this javascript:

document.getElementById("counter")

This is usually solved by doing something like:

<span jwcid="updateArea@Any" >
  <countercomponent here/>
</span>

You also shouldn't need to specify which form to submit (in 4.1.2 at least).


On 5/3/07, Paul Stanton <pa...@gunnsoft.com.au> wrote:
>
> Hi All,
>
> I'm trying to do something very basic with ajax. I simply want a value
> to increment when an onchange event is triggered for another component.
> The listener is being called via ajax etc. but I cannot get my component
> to update. I understand I'm missing the logic which identifies and
> updates the component, but have no idea where I need to do it, or what I
> need to do.
>
> I have my counter component 'AjaxCount' and my page 'AjaxDemo'.
> Hopefully the code explains what I'm trying to do:
>
> The error I'm getting:
> "No node could be found to update content in with id counter"
>
> AjaxCount.html:
>
> <h1>Update Count</h1>
> <p><span jwcid="@Insert" value="ognl:count">5</span></p>
>
> AjaxCount.java:
>
> @ComponentClass(allowInformalParameters = false)
> public abstract class AjaxCount extends ApplicationComponent
> {
>     private int count;
>
>     public int getCount()
>     {
>         return count;
>     }
>
>     public void setCount(int count)
>     {
>         this.count = count;
>     }
>
>     public void increment()
>     {
>         setCount(getCount() + 1);
>     }
> }
>
> AjaxDemo.java:
>
> public abstract class AjaxDemo extends ApplicationPage implements
> PageBeginRenderListener
> {
>     @InjectComponent("counter")
>     public abstract AjaxCount getCounter();
>
>     @EventListener(targets = "A", events = "onchange", submitForm =
> "form")
>     public void changeA(IRequestCycle cycle)
>     {
>         System.out.println("changeA()");
>         modelB = this.getModelB();
>         AjaxCount counter = getCounter();
>         counter.increment();
>         cycle.getResponseBuilder().updateComponent("B");
>         cycle.getResponseBuilder().updateComponent("counter");
>     }
> ...
> }
>
> AjaxDemo.html:
>
> ...
> <span jwcid="counter@AjaxCount"/>
> ...
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>


-- 
Jesse Kuhnert
Tapestry/Dojo team member/developer

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