Re: What's the easiest way to implement two dependent select lists ?

[Hugo Palma]

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 <[EMAIL PROTECTED]> 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.
>
>
>
>
>