Previous Zapatec Javascript Form Example Next Zapatec Javascript Form Example
Dynamic Tree

Use the Zapatec Transport (AJAX) to show a tree with dynamic branches. The content of each branch is loaded when it is clicked. Once retrieved the branch content is cached on client side.
  • "HTML" dynamic branch loads its content from external HTML file (See the source file). This is the simplest approach. The HTML in the dynamic file is the same as the original HTML in the tree
    Notice that for this demo we've created the recursion branch. It will recursively fetch the file again and again as you click on it.
  • The JSON branch fetches the branch content as a JSON object (See the source file).
  • "JSON (slow)" emulates slow internet connection. It loads the branch with delay of 5 seconds. To test it - you should put this demo on the directory on your web-server where executing of PHP scripts is allowed (See the source file).
Collapse all -- Collapse the whole tree and only show the top branches
Toggle lines -- Hide/display the lines that connect the various nodes.

When you click on a node the following will be updated.
No node selected.


You can of course customize the code to take actions other than displaying the node.