Obtain the value of the selected node

Question

Obtain the value of the selected node

I have a tree view where I need to alert the name of the selected node. However, my current code is only displaying the name of the initially selected node and not updating with subsequent selections.

For example, if I first select Node "A", it alerts "A". But then if I choose a different node, it still alerts me with "A".

Below is the code I am using:

 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 content is generated dynamically from a database.

javascript asp.net

Answer 1

Answer №1

Without much context provided, it seems like you are looking to retrieve the selected node based on user interaction.

An effective solution would be to implement event delegation. By setting an event handler on your tree's DOM node, you can capture any click events occurring on a specific element within it. If your structure differs from a table, simply adjust the 'TD' reference to match the appropriate tag name.

Upon triggering the event handler, the active node within the tree is stored for further manipulation during a click event. To access the currently selected node from another scope, utilize the tree.getSelected() method included below.

tree.onclick = function (e) {
    var target = e.target || window.event && window.event.srcElement; // Cross-browser compatibility

    while (target.tagName !== 'TD') { // Assuming Table cells as the targeted nodes
        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;
}

Answer 2

Without much context provided, it seems like you are looking to retrieve the selected node based on user interaction.

An effective solution would be to implement event delegation. By setting an event handler on your tree's DOM node, you can capture any click events occurring on a specific element within it. If your structure differs from a table, simply adjust the 'TD' reference to match the appropriate tag name.

Upon triggering the event handler, the active node within the tree is stored for further manipulation during a click event. To access the currently selected node from another scope, utilize the tree.getSelected() method included below.

tree.onclick = function (e) {
    var target = e.target || window.event && window.event.srcElement; // Cross-browser compatibility

    while (target.tagName !== 'TD') { // Assuming Table cells as the targeted nodes
        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;
}

Obtain the value of the selected node

Answer №1

Similar questions

What is the process for integrating external models into mongoose?

Display a modal before leaving the page?

Manipulating elements repeatedly using jQuery

Retrieve the CSS properties of an element located within an iframe on a different domain

Development with Node JS, express, Mongoose, and intricate nested queries

Ways to stop Bootstrap collapse from displaying depending on a certain condition in bs5 framework

Customize hoverIntent to support touch events on mobile devices

`No valid form submission when radio buttons used in AngularJS`

Tracking the movement of a handheld device through GPS technology

Regular expression locates strings that begin with

Incorrect font displayed on Bootstrap button after inserting hyperlink

Discover the parent DOM element of a specified element using jQuery

What is the reasoning behind websites predominantly opting for new windows for authentication as opposed to using pop-up dialogs or iframes?

What measures can I take to restrict users from adding names that are already in the system?

Creating a file by piping the output of an asynchronous HTTP request while utilizing async await method

Revamp the layout of the lower HTML video menu

Guide to automatically clicking a hyperlink using XPath

react-webcam npm package for optimizing video size

Obtain data with matching JSON values in a REACT application

Tips on how to ensure a JAVA application opens a webpage in a designated browser