All,

I know Java and have been using pure Java frameworks like ZK and Echo2 to
develop web applications. I don't know anything about JavaScript, and have
been trying to learn T5 in the hope of creating a real application. However,
it appears that with T5 I am not completely shielded from JavaScript (may be
I can do this in pure Java?) if I want to do AJAX. The specific example that
I want to implement is the classic 2 dropdown - the second one dependent on
the first one. So let's say you select a country, and the in the second
dropdown, the list of states/provinces is updated to match what is available
for the country selected in the first dropdown.

>From the forums, I have gathered that I must use the Chenille Kit "onEvent"
mixin to make this happen. I also saw some sample codes in the forums that
appear to solve this exact issue. The problem is that I don't know where to
put this code (in Java file or tml file or some other js file) and then how
to tie these things together. In the T5 help documentation, there is some
info about using RenderSupport for this. Again, the code given is only
snippets with no complete example that I can download/copy. I could not
understand this documentation at all.

So my question is simple: where should this code be located and how are all
these things connected? Is there anything else that needs to be added - such
as RenderSupport (and where)?
------------------------------------------------------------------------
<select t:id="operator" t:type="select" t:mixins="commons/onEvent" 
t:event="change" t:onCompleteCallback="onCompleteOperatorChange" .../> 
-----------------------------------------------------------------------
@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; 
    } 
------------------------------------------------------------------

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")); 
    } 
-----------------------------------------------------------

-- 
View this message in context: 
http://www.nabble.com/How-to-use-JavaScript-for-dependent-selects--tp24669071p24669071.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


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

Reply via email to