Mailing-List: contact users-help@tapestry.apache.org; run by ezmlm
Precedence: bulk
Reply-To: "Tapestry users" <users@tapestry.apache.org>
Received-SPF: pass (nike.apache.org: domain of yimmy149@gmail.com designates
 209.85.219.13 as permitted sender)
DomainKey-Signature: a=rsa-sha1; c=nofws;
        d=gmail.com; s=gamma;
        h=message-id:date:from:sender:to:subject:in-reply-to:mime-version
         :content-type:references:x-google-sender-auth;
        b=xLwu6WKd9FrCZEsg1/5ycnaX8PSmycgiUjVlrUszkCkg9K6FmricpnqiPceunSz+zW
         SP2kaV+0xaeH7CVUl1vtbq2WER2/tTNm4s15G0YCvA01J14ncvNW8I7NxNFeK+irceSo
         eFJuD20/Tng7Xy21hoxPj3suRdGbyMTDUb2AU=
Message-ID: <254841be0812091302v523f7bc9jc2e682a277c25f99@mail.gmail.com>
Date: Tue, 9 Dec 2008 13:02:50 -0800
From: "James Hillyerd" <james@hillyerd.com>
Sender: yimmy149@gmail.com
To: "Tapestry users" <users@tapestry.apache.org>
Subject: Re: What's the easiest way to implement two dependent select lists ?
In-Reply-To: <e8ca20260812091017v3c464ed9k685ecf702001710a@mail.gmail.com>
MIME-Version: 1.0
Content-Type: multipart/alternative;
	boundary="----=_Part_88153_27129926.1228856570285"
References: <e8ca20260812051019s41c7b836x9425611c213a9573@mail.gmail.com>
	 <20877559.post@talk.nabble.com> <493C525B.6050900@gmail.com>
	 <e8ca20260812091017v3c464ed9k685ecf702001710a@mail.gmail.com>

------=_Part_88153_27129926.1228856570285
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit
Content-Disposition: inline

Hugo,

That's a great example.  I think this belongs on the Wiki!

Is the JSON stuff built into Tapestry, or do I need a third party library
for that?

-james

On Tue, Dec 9, 2008 at 10:17 AM, Hugo Palma <hugo.m.palma@gmail.com> wrote:

> Here's how i'm doing this now:
>
> On the source select i'm using the OnEvent mixin to fire the change event:
>
> <select t:id="operator" t:type="select" t:mixins="commons/onEvent"
> t:event="change" t:onCompleteCallback="onCompleteOperatorChange" .../>
>
> The event listener method is then responsible for querying the database for
> the value to be set in the destination select:
>
> @OnEvent(component = "operator", value = "change")
>    public JSONArray onChangeOperatorEvent(String value) {
>        JSONArray jsonArray = new JSONArray();
>
>        for (Plaza plaza : getDestinationSelectValues(value)) {
>            JSONObject jsonObject = new JSONObject();
>            jsonObject.put("value", plaza.getId());
>            jsonObject.put("label", plaza.getDescription());
>
>            jsonArray.put(jsonObject);
>        }
>
>        return jsonArray;
>    }
>
> Finally, the onCompleteOperatorChange javascript function has to parse the
> return JSON and update the select input options:
>
> function onCompleteOperatorChange(response) {
>        selectElement = $("entryPlaza");
>        responseJSON = response.evalJSON();
>
>        while (selectElement .options.length > 0) {
>        selectElement .options[0] = null;
>    }
>
>    for (index = 0; index < responseJSON .length; index++) {
>        selectElement.options[index] = new Option(responseJSON
> [index].label, responseJSON [index].value);
>    }
>
>        Tapestry.ElementEffect.highlight($("entryPlaza"));
>    }
>
> It would make things a little easier if the selects weren't inside a form
> because then my event listener method could return the component instance
> itself and then on the client i would just have to replace the current
> element with the new rendered one.
>
> On Sun, Dec 7, 2008 at 10:46 PM, Hugo Palma <hugo.m.palma@gmail.com>
> wrote:
>
> >  I'm already using the OnEvent component. Still, because the model of the
> > select list i want to update is calculated server-side i need to pass it
> in
> > json to the client, parse it again in javascript and then update the
> select
> > input. This does work but i feel that there should be a simpler way of
> doing
> > this, maybe using zones.
> >
> > thermus wrote:
> >
> > I'm a Tapestry novice, but you may want to have a look at
> http://code.google.com/p/tapestry5-components/ t5components .  It allows
> you
> > to add a mixin to components to respond to an OnChange event with AJAX
> (see: http://87.193.218.134:8080/t5c-demo/oneventpage this  and
> http://87.193.218.134:8080/t5components/t5c-commons/ref/org/apache/tapestry/commons/mixins/OnEvent.html
> > this  for details).  You could then change the data model for the other
> > select component with a tiny bit of JavaScript in the onCompleteCallback
> > function.
> >
> > I'm curious how a Tapestry expert would handle it.
> >
> >
> > HugoPalma wrote:
> >
> >
> >  I have a very usual use where in a form i have two selects, and when the
> > user selects a value on one the values on the second should be filtered
> > accordingly.
> > As the Select component doesn't support ajax out-of.the-box i see myself
> > forced to implement a lot of plumbing and javascript stuff.
> >
> > Still, i feel that this kind of use case should be much easier to
> > implement.
> > Maybe i'm missing something.
> > I'd like to hear some ideas about how u would handle this.
> >
> > Thanks.
> >
> >
> >
> >
> >
>


-- 
James A. Hillyerd <james@hillyerd.com>

------=_Part_88153_27129926.1228856570285--