Question

I have a tree view. I want the name of the selected node to be alerted.
But my code keeps giving me the same name of the node selected for the first time despite of other node selections.

so for example, if I selected Node “A” when I launched the application it will alert “A”.
But if choose something else after that (a different node), it will still alert me with “A”.

Here is the code so far:

 function childnode(event) {
     var treeViewData = window["<%=nav_tree_items.ClientID%>" + "_Data"];
     var selectedNode = document.getElementById(treeViewData.selectedNodeID.value);

     alert(selectedNode.nodeName.toString());             

     return false;
 }

The treeview is generated from a database.

Answer 1

You have very little context in here, so I am assuming that you want to get the selected node based on some user interaction.

I suggest using event delegation. This code sets an event handler on your tree dom node, which will handle any click events that happened on a table cell inside it. I am assuming you are using a table. If I am wrong, change the ‘TD’ string to the correct tag name that defines your node.

When the event handler runs it saves a reference to the active node on the tree node.
If you want to do something with the active node during a click event, this is where you put your code.
If you are trying to access the currently selected node from a different scope, use the tree.getSelected() that I also wrote below.

tree.onclick = function (e) {
    var target = e.target || window.event && window.event.srcElement; // Compatibility code

    while (target.tagName !== 'TD') { // Assumes Table cells as the node you are interested in. Replace with other or check className or similar
        target = target.parentNode;
        if (target === this) {
            return; // No relevant node was hit and event bubbled to tree container
        }
    }

    this.selected = target;

    alert(target);
};

tree.getSelected = function () {
    return this.selected;
}