Retrieve specific values from the JavaScript tree excluding any that are disabled

My question is regarding a js tree with some nodes disabled. I am trying to retrieve selected node values without including the disabled nodes.

https://i.sstatic.net/N3W4A.png

I attempted to fetch the selected node values using the code snippet below, but it seems to be also capturing the disabled values

$(document).on('click', '#users_perm_save', function (event) {
       var result = $('#jstree').jstree('get_selected'); 
    });

Any insights on why this might be happening?

Answer №1

If you need to filter nodes based on certain criteria, the Array filter method can be very helpful. Here's a simple example:

Start by collecting all selected nodes, and then apply a filter to exclude any disabled nodes.

$(document).on('click', '#users_perm_save', function (event) {
   var result = $('#jstree').jstree('get_selected', true); 
  var filteredNodes = result.filter((node) => {
    return node.state.disabled == false;
  }).map((filtered) => {
    return filtered.id;
  });
   console.log(filteredNodes);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing another component's method from the render method: a step-by-step guide

I keep encountering the error message highlighted below: TypeError: _AuthenticationService__WEBPACK_IMPORTED_MODULE_2__.default.checkUserLoggedIn is not a function This error occurs when I try to execute this specific call. import AuthenticationService fr ...

The challenge of styling table borders with CSS

Can anyone help me with a problem I'm having while trying to create simple borders on a table? The border appears bold in the second row and last row, does anyone know why this is happening? https://i.sstatic.net/bCuhK.jpg Just a note: when I checke ...

What are some techniques for managing scrolling within a particular element?

I am currently working with Vue.js and utilizing Element UI components. I want to incorporate a scroll management function to achieve infinite scrolling. To better understand, please refer to the screenshot in the Example section: Despite trying differen ...

Detect with JavaScript to determine if the angular-sanitize.min.js file has been successfully fetched from the content delivery

Is there a way to determine if angular.min.js has been loaded from a CDN or locally? if(!window.angular){ //download it from another source } Assuming that the first file, angular.modified.min.js, is always loaded locally, how can we verify if the second ...

Utilizing React Redux Loading Bar: Error - Unable to access property 'default' of an undefined object

UPDATE After updating and installing the library with its newer package, I encountered the following error: TypeError: Cannot read property 'default' of undefined Function.mapStateToProps [as mapToProps] node_modules/react-redux-loading-bar/buil ...

jQuery does not seem to be able to recognize the plus sign (+)

I am currently developing a calculator program and facing some challenges with the addition function. While the other functions ("/", "-", "*") are working fine, the plus ("+") operation seems to be malfunctioning. Here's the snippet of HTML and JavaS ...

Fetching data using AngularJS and Ajax in a sequential manner

When working with the API, I need to load three different things: users groups messages Currently, my approach involves using $q.all() to load all three at once: var loadAll = $q.all([ getUsers.all(), getGroups.all(), getMessages.all() ]); ...

Complete guide on updating table styles by implementing a dark mode toggle button

I recently implemented a dark mode toggle button in my project after watching a tutorial on YouTube. Here is the HTML code for it: <div class="dark-div"> <input type="checkbox" class="checkbox" id="chk" ...

Identifying the Origin of the Mouse Pointer When Hovering Over Elements

Could someone please advise on how to detect the movement of the mouse pointer using jQuery when it hovers over an element such as a div? I am looking for a way to determine if the mouse pointer entered the element from the top, left, bottom, or right sid ...

The width and height properties in the element's style are not functioning as expected

let divElement = document.createElement("div"); divElement.style.width = 400; divElement.style.height = 400; divElement.style.backgroundColor = "red"; // num : 1 divElement.innerText = "Hello World "; // num : 2 document.body.append(divElement); // Af ...

Using $where in a MeteorJS collection query

I am working on a MeteorJS application that has a collection with a field named ticker. I am trying to use the $where statement to compare two fields within the same collection: Tickers.find({$where: function() { return (this.price < this.value); }}) ...

Can you combine multiple items in PaperJS to move them collectively?

I'm working on a PaperJS project that involves numerous circles that can move independently. In addition to this, I would like each circle to have PointText at its center acting as a label. However, instead of having to manually animate each label ev ...

At what point is a $.cache considered oversized?

After coming across a fascinating tutorial, I learned that certain memory leaks in jQuery can be identified by monitoring the size of the $.cache variable. It was emphasized to always keep an eye on its size, as it could indicate potential issues if it bec ...

Google-play-scraper encounters an unhandled promise rejection

I'm trying to use the google-play-scraper library with Node.js, but I keep encountering an error when passing a variable as the 'appId'. How can I resolve this issue? Example that works: var gplay = require('google-play-scraper') ...

Passing the selected object from a child's state to its parent in a React application

I'm trying to develop a straightforward group creator that allows users to assign other users to a custom group. The app has a form with input fields for the group name and selecting users from a child component (selector). However, I am struggling wi ...

Managing jQuery tabs using buttons for navigation

Struggling to control tabs with a button click function? Want the user to navigate through tabs in order, each with a different html form and validation. However, facing issues as the next & previous buttons are not working as expected. Wondering why the b ...

Unexpected behavior of ion-select: No rendering of selected value when applied to filtered data

I came across an unexpected issue with the dynamic data filtering feature of ion-select. In my application, users are required to choose three unique security questions during registration. I have an array of available questions: questions: Array<{isSe ...

Find the total number of table rows that exist between two specific rows using jQuery

<table> <tr id="family_1"> <td>Family 1</td> </tr> <tr class="member"> <td>Member 1</td> </tr> <tr class="member"> <td>Member 2</td> </tr> ... <tr ...

A guide to exporting a class in ReactJS

I am currently working on exporting some classes from my music player file - specifically playlist, setMusicIndex, and currentMusicIndex. const playlist = [ {name: 'September', src: september, duration: '3:47'}, {name: 'hello ...

A Comparison of Performance between If and Filter Operators in RxJS

Let's take a look at an example using RxJS. Type X: [utilizing filter] this.userService.afAuth.authState .pipe(filter(user => !!user)) .subscribe( _ => this.router.navigate(["/anything"]) ) Type Y: [utilizing if statement] this.u ...