Update your tree with AJAX


Bookmark and Share


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

Put this into your <BODY> section

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>)


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:

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.


James Grit

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).


James Grit at 04:32AM, 2011/05/20.
Thanks for it...
vaibhav at 03:56AM, 2012/03/30.
Great script. I was looking for something that was bare basics but still had a good platform to start from.

Thanks for sharing the code.
Justin at 07:43AM, 2014/08/06.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2016 dhtmlgoodies.com