Update your tree with AJAX

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

	<style type="text/css">
	body{
		background-image:url('../../images/heading3.gif');
		background-repeat:no-repeat;
		padding-top:85px;	
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.9em;
		line-height:130%;

	}
	#ajaxMessage{
		margin-top:10px;
		font-size:0.9em;
		color:red;
	
	}
	#expandCollapse{
		font-size:0.9em;
	}
	a{
		color:#000;
		font-family:arial;
	}
	
	#dhtmlgoodies_tree{
		margin:0px;
		padding:0px;
		margin-left:10px;
	}
	#dhtmlgoodies_tree ul{	/* Sub menu groups */
		margin-left:20px;	/* Left spacing */
		padding-left:0px;
		display:none;	/* Initially hide sub nodes */
	}
	#dhtmlgoodies_tree li{	/* Nodes */
		list-style-type:none;
		vertical-align:middle;
		
	}
	#dhtmlgoodies_tree li a{	/* Node links */
		color:#000;
		text-decoration:none;
		font-family:arial;
		font-size:0.8em;
		padding-left:2px;
	}
	#dhtmlgoodies_tree input{
		width:200px;
		font-size:0.7em;
		margin-left:2px;
		font-family:arial;
	}
	</style>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, November 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/
		
	var dhtmlgoodies_tree;
	var imageFolder = 'images/';	// Path to images
	var folderImage = 'dhtmlgoodies_folder.gif';
	var plusImage = 'dhtmlgoodies_plus.gif';
	var minusImage = 'dhtmlgoodies_minus.gif';
	var initExpandedNodes = '';	// Cookie - initially expanded nodes;
	var fileName = 'updateNode.php';	// External file called by AJAX	
	var timeoutEdit = 20;	// Lower value = shorter delay from mouse is pressed down to textbox appears.
	
	
	var ajax = new sack();
	
	/*
	These cookie functions are downloaded from 
	http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
	*/
	function Get_Cookie(name) { 
	   var start = document.cookie.indexOf(name+"="); 
	   var len = start+name.length+1; 
	   if ((!start) && (name != document.cookie.substring(0,name.length))) return null; 
	   if (start == -1) return null; 
	   var end = document.cookie.indexOf(";",len); 
	   if (end == -1) end = document.cookie.length; 
	   return unescape(document.cookie.substring(len,end)); 
	} 
	// This function has been slightly modified
	function Set_Cookie(name,value,expires,path,domain,secure) { 
		expires = expires * 60*60*24*1000;
		var today = new Date();
		var expires_date = new Date( today.getTime() + (expires) );
	    var cookieString = name + "=" +escape(value) + 
	       ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + 
	       ( (path) ? ";path=" + path : "") + 
	       ( (domain) ? ";domain=" + domain : "") + 
	       ( (secure) ? ";secure" : ""); 
	    document.cookie = cookieString; 
	} 
	
	function expandAll()
	{
		var menuItems = dhtmlgoodies_tree.getElementsByTagName('LI');
		for(var no=0;no<menuItems.length;no++){
			var subItems = menuItems[no].getElementsByTagName('UL');
			if(subItems.length>0 && subItems[0].style.display!='block'){
				showHideNode(false,menuItems[no].id.replace(/[^0-9]/g,''));
			}			
		}
	}
	
	function collapseAll()
	{
		var menuItems = dhtmlgoodies_tree.getElementsByTagName('LI');
		for(var no=0;no<menuItems.length;no++){
			var subItems = menuItems[no].getElementsByTagName('UL');
			if(subItems.length>0 && subItems[0].style.display=='block'){
				showHideNode(false,menuItems[no].id.replace(/[^0-9]/g,''));
			}			
		}		
	}
			
	function showHideNode(e,inputId)
	{
		if(inputId){
			if(!document.getElementById('dhtmlgoodies_treeNode'+inputId))return;
			thisNode = document.getElementById('dhtmlgoodies_treeNode'+inputId).getElementsByTagName('IMG')[0]; 
		}else {
			thisNode = this;
		}
		if(thisNode.style.visibility=='hidden')return;
		var parentNode = thisNode.parentNode;
		inputId = parentNode.id.replace(/[^0-9]/g,'');
		if(thisNode.src.indexOf('plus')>=0){
			thisNode.src = thisNode.src.replace('plus','minus');
			parentNode.getElementsByTagName('UL')[0].style.display='block';
			if(!initExpandedNodes)initExpandedNodes = ',';
			if(initExpandedNodes.indexOf(',' + inputId + ',')<0) initExpandedNodes = initExpandedNodes + inputId + ',';
			
		}else{
			thisNode.src = thisNode.src.replace('minus','plus');
			parentNode.getElementsByTagName('UL')[0].style.display='none';
			initExpandedNodes = initExpandedNodes.replace(',' + inputId,'');
		}	
		Set_Cookie('dhtmlgoodies_expandedNodes',initExpandedNodes,500);
	}

	function okToNavigate()
	{
		if(editCounter<10)return true;
		return false;		
	}
	
	var editCounter = -1;
	var editEl = false;
	
	function initEditLabel()
	{	
		if(editEl)hideEdit();
		editCounter = 0;
		editEl = this;	// Referenc to a Tag
		startEditLabel();
	}
	
	function startEditLabel()
	{
		if(editCounter>=0 && editCounter<10){
			editCounter = editCounter + 1;
			setTimeout('startEditLabel()',timeoutEdit);
			return;
		}
		if(editCounter==10){
			var el = editEl.previousSibling;
			el.value = editEl.innerHTML;
			editEl.style.display='none';
			el.style.display='inline';	
			el.select();
			return;
		}		
	}
	
	function showUpdate()
	{
		document.getElementById('ajaxMessage').innerHTML = ajax.response;
	}
	
	function hideEdit()
	{				
		var editObj = editEl.previousSibling;	
		if(editObj.value.length>0){
			editEl.innerHTML = editObj.value;	
			ajax.requestFile = fileName + '?updateNode='+editObj.id.replace(/[^0-9]/g,'') + '&newValue='+editObj.value;	// Specifying which file to get
			ajax.onCompletion = showUpdate;	// Specify function that will be executed after file has been found
			ajax.runAJAX();		// Execute AJAX function
						
		}
		editEl.style.display='inline';
		editObj.style.display='none';
		editEl = false;			
		editCounter=-1;
	}
	
	function mouseUpEvent()
	{
		editCounter=-1;		
	}
	
	function initTree()
	{
		dhtmlgoodies_tree = document.getElementById('dhtmlgoodies_tree');
		var menuItems = dhtmlgoodies_tree.getElementsByTagName('LI');	// Get an array of all menu items
		for(var no=0;no<menuItems.length;no++){
			var subItems = menuItems[no].getElementsByTagName('UL');
			var img = document.createElement('IMG');
			img.src = imageFolder + plusImage;
			img.onclick = showHideNode;
			if(subItems.length==0)img.style.visibility='hidden';
			var aTag = menuItems[no].getElementsByTagName('A')[0];
			
			if(aTag.id)numericId = aTag.id.replace(/[^0-9]/g,'');else numericId = (no+1);
			
			aTag.id = 'dhtmlgoodies_treeNodeLink' + numericId;
			
			var input = document.createElement('INPUT');
			input.style.width = '200px';
			input.style.display='none';
			menuItems[no].insertBefore(input,aTag);
			input.id = 'dhtmlgoodies_treeNodeInput' + numericId;
			input.onblur = hideEdit;
						
			menuItems[no].insertBefore(img,input);
			menuItems[no].id = 'dhtmlgoodies_treeNode' + numericId;
			aTag.onclick = okToNavigate;
			aTag.onmousedown = initEditLabel;
			var folderImg = document.createElement('IMG');
			if(menuItems[no].className){
				folderImg.src = imageFolder + menuItems[no].className;
			}else{
				folderImg.src = imageFolder + folderImage;
			}
			menuItems[no].insertBefore(folderImg,input);
		}	
		
		initExpandedNodes = Get_Cookie('dhtmlgoodies_expandedNodes');
		if(initExpandedNodes){
			var nodes = initExpandedNodes.split(',');
			for(var no=0;no<nodes.length;no++){
				if(nodes[no])showHideNode(false,nodes[no]);	
			}			
		}	
		
		document.documentElement.onmouseup = mouseUpEvent;
	}
	
	window.onload = initTree;	
	</script>

Put this into your <BODY> section

	<ul id="dhtmlgoodies_tree">
		<li><a href="#" id="node1">Main item</a>
			<ul>
				<li><a href="#" id="node2">Sub menu item</a>
					<ul>
						<li><a href="#">Sub menu item</a>
							<ul>
								<li class="dhtmlgoodies_sheet.gif"><a href="http://www.dhtmlgoodies.com" id="node3">Sub menu item with active link</a></li>	
								<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node4">Sub menu item</a></li>	
								<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node5">Sub menu item</a></li>	
								<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node6">Sub menu item</a></li>
							</ul>
						</li>
						<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node7">Sub menu item</a></li>
						<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node8">Sub menu item</a></li>
						<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node9">Sub menu item</a></li>
						<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node10">Sub menu item</a></li>
					</ul>
				</li>
				<li><a href="#" id="node11">Sub menu item</a>
					<ul>
						<li><a href="#" id="node12">Sub menu item</a></li>
						<li><a href="#" id="node13">Sub menu item</a></li>
						<li><a href="#" id="node14">Sub menu item</a></li>
						<li><a href="#" id="node15">Sub menu item</a></li>
					</ul>				
				</li>
				<li><a href="#" id="node16">Sub menu item</a></li>
				<li><a href="#" id="node17">Sub menu item</a></li>
				<li><a href="#" id="node18">Sub menu item</a></li>
			</ul>
		</li>
		<li><a href="#" id="node19">Main item</a></li>
		<li><a href="#" id="node20">Main item</a>
			<ul>
				<li><a href="#" id="node21">Sub menu item</a></li>
				<li><a href="#" id="node22">Sub menu item</a></li>
			</ul>
		</li>
		<li><a href="#" id="node23">Main item</a>
			<ul>
				<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node24">Sub menu item</a></li>
				<li><a href="#" id="node25">Sub menu item</a></li>
				<li class="dhtmlgoodies_sheet.gif"><a href="#" id="node26">Sub menu item</a></li>
				<li><a href="#" id="node27">Sub menu item</a></li>
			</ul>		
		</li>	
	</ul>
	<div id="expandCollapse">
		<a href="#" onclick="expandAll();return false">Expand all</a>
		<a href="#" onclick="collapseAll();return false">Collapse all</a>
	</div>
	<div id="ajaxMessage"></div>

Download images

You can download the images from this zip file. Put them in a sub folder called "images".

Download Javascript file

I have used the SACK library for the ajax part of this script. I have made a copy available for download here.

Put ajax.js in a subfolder called "js" or change the path to the file in the code above(i.e. <script type="text/javascript" src="js/ajax.js"></script>)

Configuration

Tree setup

This script is based on my static folder tree which you can find in the folder tree section. Look there for help regarding how to configure the tree. The only difference is that I have given all the <A> tags in this three each own unique ID. example:
<li><a href="#" id="node27">Sub menu item</a></li>

Ajax setup

This script works in the following way:

Press down your mouse button on one of the items in the tree.
Hold it down until you see a text field.
Type in a new name for this node.
Stop editing by clicking somewhere else in the window.
The script now calls an external file(updateNode.php) by use of ajax. This external file could now make an update in your database. In this demo I have made it a little simpler for safety reasons. The script will display a message that the node has been updated.

The content of my updateNode.php file look like this:

<?php
if(isset($_GET['updateNode']) && isset($_GET['newValue'])){

echo "Message from AJAX(on the server): updating node with id: ".$_GET['updateNode']." with new value: " . $_GET['newValue'];
}

?>

This is PHP code. You can use other server side language as well.

Comments

Hi,I really like your script. One question: what code exactly would be needed to really update the page (save the modifications). Furthermore: can it work with an included textfile (load & save).Greetz,JRG

James Grit at 10:32AM, 2011/05/20.