Submit FAQs Awards Usage Terms Contact
Categories
Partners
DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:

Asynchronous Treeview example

TreeView Menu supports an asynchronous mode, whereby you start out with an empty tree, then specify a server side script that dynamically returns the HTML for the branches in JSON format for the script to use to populate the tree with asynchronously and on demand. Here is an example:

Async treeview demo:

Note that use of this feature requires the external JS file jquery.treeview.async.js apart from the standard library files.



<script type="text/javascript">

$(document).ready(function(){
 $("#asynctree").treeview({
  url: "source.php"
 })
});

</script>

<ul id="asynctree">
</ul>

View source.php

In the words of Jörn Zaefferer, the author himself, on this feature:

"Notice how the only part of the list that exists at first is just an <ul>, and an </ul>. On the page load, treeview is loaded with the parameter "url: source.php," which is the page it goes to for its data. If you take a look at the treeview.async.js file, you can actually see that on the load of treeview, it hits the load function with a "root" value of "source," thus populating the page with the initial list. In the load() function the JSON object it passes into source.php as post data is {root: root} where the name of the key is root, and the value is "source", as passed in by the $.fn.treeview function in the treeview.async.js file. Therefore, it's actually passing {"root" : "source"} to source.php.

Look in source.php and you'll see that the if statement checks for $_REQUEST['root'], and checks to see if it equals "source." Since it does, it responds with the original list you see on the page at load. Note the certain classes used in each node to determine whether or not it "hasChildren" (shows a plus sign next to it, and is expandable), whether or not it is originally open, etc. Very handy stuff. You can even send your own classes back, and have them applied as well.

So, after the initial loading of the tree, treeview.async.js actually extends itself again, this time assigning the toggle setting to an anonymous function that goes and grabs more data when you expand a node for the first time.

Alright, so looking at the third major node ("After Lunch"), it's currently closed. Click the plus sign, and since there's already data, it show the rest of the tree. Click the 3.6 node, and treeview goes /back/ to source.php for more data, except that it isn't passing "source" as the value of "root", anymore. This time it's passing the id of the node you clicked on as the value of "root". In source.php, it doesn't find that "root" == "source", and responds with the bottom half of the data, thus filling the node with the data you find on the bottom."

Table Of Contents

This script consists of an index page plus 1 supplementary page: