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: