You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by "BB@umd" <bb...@umd.edu> on 2009/06/22 22:18:07 UTC

Tapestry 5 with OnEvent mixin

I am trying to link dynamically three dropdownboxes with the OnEvent Mixins
and javascript code. I am using the OnEvent.class from chenillekit.

Here is my page.tml :

<form t:id="form" t:type="Form">    
        <t:select t:id="grandparent" model="${category}" value="prop:categ"
t:mixins="OnEvent" event="change" onCompleteCallback="onSelectCategory" />
       <t:select t:id="parent" model="${application}" value="prop:app"
t:mixins="OnEvent" event="change" onCompleteCallback="onSelectApplication"/>
        <t:select t:id="child" model="${version}" value="prop:vers" />
</form>

The, here is my page.java :

	@OnEvent(component = "grandparent", value = "change")
	public JSONObject onChangeFromGrandparent(String value)
	{		
		System.out.println("Event Caught !");
		String translatedValue =
applicationManager.getApplicationsByCategoryAsString(value);
		System.out.println(translatedValue);
	    return new JSONObject().put("translatedValue", translatedValue);
	}
	
	@OnEvent(component = "parent", value = "blur")
	public JSONObject onChangeFromParent(String value)
	{		
		System.out.println("Event Caught !");
		System.out.println("value of 2nd select : "+value);
		String translatedValue =
versionManager.getVersionsByApplicationAsString(value);
		System.out.println(translatedValue);
	    return new JSONObject().put("translatedValue", translatedValue);
	}

Finally, here is my javascript code :

function onSelectCategory(response) 	{
		var arrApp = new Array();
        	arrApp = response.translatedValue;
    		var i=0;
    		var elem;
    		var tmp="";    		   	   		
    		while ( i < arrApp.length ) {    			
    			tmp += arrApp[i];
    			if (arrApp[i].match(" ")) {    				
        		    elem = document.createElement("option") ;
         		    elem.setAttribute("value",i);
        		    var txt = document.createTextNode(tmp);
        		    elem.appendChild(txt);
        		    document.form.parent.appendChild(elem);
        		    tmp="";    				
    			}
    			i=i+1;    		   		           		      
    		}}		
function onSelectApplication(response) {
	var arrVer = new Array();
       arrVer = response.translatedValue;
 	var i=0;
  	var elem;
  	var tmp="";	
    	   		
    		while ( i < arrVer.length ) {   			
    			tmp += arrVer[i];
    			if (arrVer[i].match(" ")) {    				
        			elem = document.createElement("option") ;
         		        elem.setAttribute("value",i);
        		        var txt = document.createTextNode(tmp);
        		        elem.appendChild(txt);
        		        document.form.child.appendChild(elem);
        		        tmp="";    				
    			}
    				i=i+1;	      
    		}}

The second Dropdown Box (id="parent") is successfully updated with the first
onChangeFromGrandparent Event. However when I tried to do the same thing
between the second et the third DropDownBox (id="change"), the value caught
in the onChangeFromParent Event is not the string value of the selected
application but a random number.

Can you explain me why ?

-- 
View this message in context: http://www.nabble.com/Tapestry-5-with-OnEvent-mixin-tp24154613p24154613.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


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