Development:YUI TreeView

The main documentation page for this component is here. Its pretty good, but doesn't cover dynamic loading using PHP particularly well.

For a good breakdown of how to add static nodes, see the page on the DicoTrad block. For dynamically loaded nodes, see the Ajax marking block.

Dynamically loading content

If you intend to AJAX the tree items in dynamically, you need to use the Yahoo Connection Manager. It is easy to follow the examples, but the o.responseText string that comes back is not well documented. To get more than one bit of data at a time, e.g. many tree nodes, create a file on the server that will run a database query and return something (e.g. an array of objects) in JSON format, e.g.

$output = '
 [
   {
    "name":"item 1",
    "id":"3"
   },
   {
    "name":"item 2",
    "id":"45"
   }
 ]';
print_r($output);

Note that you need to use print_r() rather than return() in the php file, then eval() in your client-side javascript to make the data available to the rest of the tree functions. XML can also be used, if you prefer, but I have lost the example link :(

In the browser code, use something like this

var stuff = eval(o.responseText);

which would need to go somewhere in the success portion of the callback function (see the example from the link above), so that you can then reference the variable as a normal array or object. Then, you can make the node(s) (maybe using a loop, getting the data from the array of objects) with e.g.

tmpNode = new YAHOO.widget.TextNode(stuff[0].name, node, false);  

remembering to alter the variable name each time the loop iterates.