So last night, during my CF/AJAX presentation, I mentioned that I didn't think most folks made use of cftree, so this question is perfectly poised to prove me wrong. John asks:
I always have ideas, but I assume you want a good idea, and those are a bit more rare. The original blog entry had a cfdiv that was bound to the tree. As soon as you clicked any leaf, the div was updated. In order to stop navigating on certain types of nodes, we need to change things up a bit. First, let's add a cfajaxproxy tag. This will give us more control over the binding:I loved your example of binding a cfdiv to a cftree node. I would like to use this example but only have the cfdiv bind when a child node is clicked on. I have a simple parent-child tree structure with only one level. Do you have any ideas?
<cfajaxproxy bind="javascript:doNav({mytree.node})">
This line says - "When the tree's selected node changes, run a JavaScript function doNav and pass the node value." My JavaScript is rather simple:
<script>
function doNav(n) {
if(n != 'root') ColdFusion.navigate('dyn.cfm?value='+n,'content');
}
</script>
My original tree (the full code will be below) used root for the top level leaf. So basically I just said, if the node was root, then don't do anything, otherwise, update the div. Here is the complete file:
<cfajaxproxy bind="javascript:doNav({mytree.node})">
<script>
function doNav(n) {
if(n != 'root') ColdFusion.navigate('dyn.cfm?value='+n,'content');
}
</script>
<cfform name="form">
<cftree format="html" name="mytree">
<cftreeitem display="Navigation" value="root">
<cftreeitem display="Page A" parent="root" value="a">
<cftreeitem display="Page B" parent="root" value="b">
</cftree>
</cfform>
<cfdiv id="content" />
The issue with this is that it only supports one root node. If you had another root node (imagine two parent leafs, Products and Services), you would need to update your JavaScript to check for both values. You could perhaps get a bit fancy and name all your root nodes like so:
root_Products
root_Services
And then simply use JavaScript to see if the selected node begins with root_.
Anyway, I think this gives you the idea.