The Dojo Tree Control for beginners - part 2
So you have a dojo tree control on your page and now you want to do something with it. The two most obvious things to do are using the tree control in a form so that the user can select something from it, and to use it in a real Ajaxy Web 2.0 application, for example to display a tree of Inbox folders if you’re building an email application. In both cases you’ll need to know when the selection (which node is selected in the tree) has changed. In the case where you use the tree in a form you’ll only inspect the selected after the form has been submitted, in the Ajax app you’ll want to react in Javascript upon a ’selection changed’ event.
Well it turns out that to get the ‘form’ scenario to work, you need the same foundation as for the ‘Ajax’ scenario - so here it is.
Having a Javascript function called when the selection changes
Starting from my earlier post on getting a bare-bones Dojo tree control up and running, here’s what you need to add:
- Add an ‘eventNames’ attribute to the TreeSelector so that it looks like this:
<div dojoType="TreeSelector" widgetId="treeSelector" eventNames="select:nodeSelected"></div> - In the <head> section of your html document, add a Javascript section like the one below:
<script language="JavaScript" type="text/javascript">
dojo.addOnLoad(function() {
dojo.event.topic.subscribe("nodeSelected", function(message) {
alert(message.node.title);
});
});
</script>
Now every time the selection changes (when the user selects another node in the tree), you’ll see a message box with the text of the newly selected node.
Submitting the selected tree node in a form
But what about when you want to know the selected node in the form you’re submitting to? What you have to do is make a hidden input form element and set the value, using the javascript method above, when the selection changes. Follow these steps:
- For this to work you need to have a named form, so your form has to have a ‘name’ attribute:
<form name="form_with_dojo_tree" action="post"> - Add a hidden form element to your form:
<input type="hidden" name="selected_tree_node" value=""> - Add the Javascript code described above, but in the method (in place of the ‘alert’), put the following:
window.document.form_with_dojo_tree.selected_tree_node.value = message.node.title;
In the code that handles your form (the php or asp or jsp or whatever script), the value is available to you in the ’selected_tree_node’ post variable. Simple as that!
