tapestry-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Hugo Palma <hugo.m.pa...@gmail.com>
Subject Re: What's the easiest way to implement two dependent select lists ?
Date Tue, 09 Dec 2008 21:58:50 GMT
Everything i used in the example is built into Tapestry except the 
OnEvent mixin that is provided by the library 
t5-components(http://87.193.218.134:8080/t5components/index.html).
The javascript stuff is part of prototype that is already bundled with 
Tapestry.

James Hillyerd wrote:
> 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.
>>>
>>>
>>>
>>>
>>>
>>>       
>
>
>
>   

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message