• Advertisement
Sign in to follow this  

[web] Looking for some YUI Dynamic Treeview help

This topic is 3672 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi everyone, I am a new member to gamedev.net and was hoping that someone might have a suggestion or fix for a problem I am having with my YUI tree. So, this is the problem: I am currently working with several different languages and tools for a web development project; Eclipse (IDE), Java, webworks, javascript, and YUI. So my problem is this. I have a tree that has three levels of nodes on it. The first level is a topic with several subtopics under each one. Under each subtopic is a list of previously answered questions that a user would have been asked in a different part of the site. The tree lists each question with their answer and then an EDIT button. When the EDIT button is clicked, that node of the tree should refresh with the questions listed but the answers will now be in an editable textbox with an UPDATE button to save the new data to the database. Whew...long winded I know... So, here is my question, first, is there a specific way that the data within a node should be changed while keeping the current state of the tree intact? Here is the code I currently have if you want to take a look...it may help.
<script type="text/javascript">
	function buildTree() { 
		//create a new tree: 
		tree = new YAHOO.widget.TreeView("treeDiv1"); 
		
		//turn dynamic loading on for entire tree: 
		tree.setDynamicLoad(loadNodeData, 0);//currentIconMode); 
		//get root node for tree: 
		var root = tree.getRoot(); 
		var rootNodes = new Array(<ww:property value="rootNodeList" escape="false" />);
		for (var i = 0; i < rootNodes.length; i++) {
			var tmpNode = new YAHOO.widget.TextNode(rootNodes, root, false); 
		} 
	    
	   	//render tree with these toplevel nodes; all descendants of these nodes 
	   	//will be generated as needed by the dynamic loader.
	   	tree.draw(); 
	} 
	
	function loadNodeData(node, fnLoadComplete) { 
	    var nodeLabel = encodeURI(node.label); 
     	    var patientId = <ww:property value="model.id" escape="false" />;
	    //prepare URL for XHR request: 
	    var sUrl = "NPSModuleAjaxResponse.action?query=" + nodeLabel + "&pat=" + patientId;
	    
	    //prepare our callback object 
	    var callback = { 
     
	        //if our XHR call is successful, we want to make use 
	        //of the returned data and create child nodes. 
	        success: function(oResponse) { 
	            YAHOO.log("XHR transaction was successful.", "info", "example"); 
	            
	            var oResults = eval(oResponse.responseText); 

		    if(YAHOO.lang.isArray(oResults)) {
	                for (var i=0, j=oResults.length; i<j; i++) { 
	                    var tempNode = new YAHOO.widget.TextNode(oResults, node, false); 
	                } 
	            } else {
	                var tempNode = new YAHOO.widget.HTMLNode(oResults.toString(), node, false, false);
		    }
				
	            //When we're done creating child nodes, we execute the node's 
	            //loadComplete callback method which comes in via the argument 
	            //in the response object (we could also access it at node.loadComplete, 
	            //if necessary): 
	            oResponse.argument.fnLoadComplete(); 
	        }, 
	         
	        //if our XHR call is not successful, we want to 
	        //fire the TreeView callback and let the Tree 
	        //proceed with its business. 
	        failure: function(oResponse) { 
	            YAHOO.log("Failed to process XHR transaction.", "info", "example"); 
	            oResponse.argument.fnLoadComplete(); 
	        }, 
	        
	        //our handlers for the XHR response will need the same 
	        //argument information we got to loadNodeData, so 
	        //we'll pass those along: 
	        argument: { 
	            "node": node, 
	            "fnLoadComplete": fnLoadComplete 
	        }, 
	         
	        //timeout -- if more than 7 seconds go by, we'll abort 
	        //the transaction and assume there are no children: 
	        timeout: 7000 
	    }; 
     
	    //With our callback object ready, it's now time to  
	    //make our XHR call using Connection Manager's 
	    //asyncRequest method: 
    	YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 
	}
	
	function updateNodeData(nodeLabel, edit) {
		var node = getNodeByLabel(nodeLabel);
		var editMod = ((edit == "true") ? "&editMod=true" : "");
 		
		if(node) {
		    var nodeLabel = encodeURI(node.label); 
	     	    var patientId = <ww:property value="model.id" escape="false" />;
		    //prepare URL for XHR request: 
		    var sUrl = "NPSModuleAjaxResponse.action?query=" + nodeLabel + "&pat=" + patientId + editMod;
		    
		    //prepare our callback object 
		    var callback = { 
	     
		        //if our XHR call is successful, we want to make use 
		        //of the returned data and create child nodes. 
		        success: function(oResponse) { 
		            YAHOO.log("XHR transaction was successful.", "info", "example"); 
		            
		            var oResults = eval(oResponse.responseText); 
					
	                if(YAHOO.lang.isArray(oResults)) {
		                for (var i=0, j=oResults.length; i<j; i++) { 
		                    var tempNode = new YAHOO.widget.TextNode(oResults, node, false); 
		                    
		                } 
	            	} else {
	                	var tempNode = new YAHOO.widget.HTMLNode(oResults.toString(), node, false, false);
			}
					
					//node.getChildrenEl().innerHTML = oResponse;
					
		            //When we're done creating child nodes, we execute the node's 
		            //loadComplete callback method which comes in via the argument 
		            //in the response object (we could also access it at node.loadComplete, 
		            //if necessary): 
		            oResponse.argument.fnLoadComplete();
		        }, 
		         
		        //if our XHR call is not successful, we want to 
		        //fire the TreeView callback and let the Tree 
		        //proceed with its business. 
		        failure: function(oResponse) { 
		            YAHOO.log("Failed to process XHR transaction.", "info", "example"); 
		            oResponse.argument.fnLoadComplete(); 
		        }, 
		         
		        //our handlers for the XHR response will need the same 
		        //argument information we got to loadNodeData, so 
		        //we'll pass those along: 
		        argument: { 
		            "node": node, 
		            "fnLoadComplete": node.loadComplete 
		        }, 
		         
		        //timeout -- if more than 7 seconds go by, we'll abort 
		        //the transaction and assume there are no children: 
		        timeout: 7000 
		    }; 
	     
		    //With our callback object ready, it's now time to  
		    //make our XHR call using Connection Manager's 
		    //asyncRequest method: 
	    	YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 
		}
		else {
			alert("Not working!");
		}
	}
	
	// Find the node in the tree based on the label.
	function getNodeByLabel(label)
	{
		var node = null;
		var found = false;
		var index = 1;
		do
		{
			node = tree.getNodeByIndex(index++);
			if(node != null && node.label != null && node.label == label)
				found = true;
		}
		while(node != null && !found);
		return node;
	}
	
	YAHOO.util.Event.addListener(window, "load", buildTree);
</script>

In the updateNodeData function, if I replace the code:
if(YAHOO.lang.isArray(oResults)) {
		                for (var i=0, j=oResults.length; i<j; i++) { 
		                    var tempNode = new YAHOO.widget.TextNode(oResults, node, false); 
		                    
		                } 
	            	} else {
	                	var tempNode = new YAHOO.widget.HTMLNode(oResults.toString(), node, false, false);
			}

with
node.getChildrenEl().innerHTML = oResponse;

I get the node replaced with the new data, but I believe that it is writing it outside of the node. I still get the same error however. Here is the error:
this.getChildrenEl is not a function
loadComplete()treeview.js (line 1595)
success(Object tId=2 status=200 statusText=OK)ShowPatientMain.a... (line 1460)
handleTransactionResponse(Object conn=XMLHttpRequest tId=2, Object argument=Object timeout=7000, undefined)connection.js (line 476)
(no name)()connection.js (line 428)
[Break on this error] this.getChildrenEl().innerHTML = this.completeRender();

This is a normal function in the treeview.js from the YUI website and it is called when the original tree runs, so I know it works. It is just not working with my new function. Anyone know what I should do, or have suggestions?

Share this post


Link to post
Share on other sites
Advertisement
Sign in to follow this  

  • Advertisement