The issue of conflicting checkboxes and types plugins in jstree

Working on constructing a tree with the jstree JavaScript library and incorporating two jstree plugins:

  • checkbox plugin

  • types plugin

Below is a snippet of code for reference:

var mydata=[
id: "1",
parent: "#",
text: "node1",
},
{
id: "2",
parent: "#",
text: "node2",
type: "nodeattribute",
}];

        $('#dqResultsJSTree').jstree(
                {
                    'core' : {
                        'themes' : {
                            'variant' : 'large',
                            'icons' : false,
                        },
                        'data' : mydata,
                    },
                    'types' : {
                            'nodeattribute' : {
                              'icon' : 'http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/24/Letter-A-lg-icon.png',
                            },
                     },
                    'checkbox' : {
                        cascade : "",
                        three_state : false,
                    },
                    'plugins' : [ 'checkbox', 'types'],
                });

Encountering an issue where the type function isn't functioning as expected. The icon specified for the node with id=2 under the nodeattribute type is not appearing. Has anyone else faced this challenge when using both the checkbox and types simultaneously?

Appreciate any assistance in advance.

Source:

Answer №1

To enable icons, make sure to include the key 'icons': true in the configuration settings under the core section of jsTree.

I have also corrected your JSON format - remember to add a opening curly brace { for the first object in the mydata array.

Take a look at the live demonstration here: JS Fiddle Demo

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

Modify information on the user interface without the need to refresh the page

Is there a way to update data on the UI without having to refresh the screen in a web application built with Node.js? I'm looking to make only specific changes on the screen. Additionally, how can I ensure that the data displayed on the screen is upda ...

How can you make sure that mouse events pass through the KineticJS stage?

Is it possible to have a PanoJS3 component covering the entire screen with a KineticJS stage on top, but still allow touch events to pass through the KineticJS stage to what lies beneath? I want shapes on the stage or layer to receive the touch events, wh ...

Change the value of the material slide toggle according to the user's response to the JavaScript 'confirm' dialogue

I am currently working on implementing an Angular Material Slide Toggle feature. I want to display a confirmation message if the user tries to switch the toggle from true to false, ensuring they really intend to do this. If the user chooses to cancel, I&ap ...

The `forEach` method cannot be called on an undefined node.js

I have been developing a small study website but encountered an issue with the title. Despite extensive internet research, I have not been able to find a solution. The system I am using is Ubuntu with node.js, express, and mysql. app.js var fs = requir ...

Using a button click to toggle the vue-ctk-date-time-picker in VueJS

Currently, I am utilizing the Vue component - https://github.com/chronotruck/vue-ctk-date-time-picker within my own component. However, I am encountering an issue where I would like to maintain the component's original functionality while having a but ...

After a single click, the functionality of jquery.nav.js seems to be malfunctioning

Encountering an error message: Uncaught TypeError: Cannot read property 'top' of undefined(…) jquery.nav.js:183 In an effort to convert my web app into a Single Page Application (SPA) using the jquery.nav.js library (available at https://githu ...

What is the best way to send a prop from a parent component to its child using context in React?

Currently, I am working on fetching data in a React application. My goal is to extract an individual value from the response and pass it as a prop in a context from a parent component. The `trendingData` variable holds information retrieved from an API cal ...

Execute the script when the document is fully loaded

Is there a way to show a dialog in jQuery when the document loads without using <body onload="showdialog();">? Can the javascript code be placed in the main div or footer div to work like the onload event? <body onload="$('#dialog').sli ...

TypeScript struggling to recognize specified types when using a type that encompasses various types

I have a defined type structure that looks like this: export type MediaProps = ImageMediaProps | OembedProps; Following that, the types it references are defined as shown below: type SharedMediaProps = { /** Type of media */ type: "image" | "oembed"; ...

Specify the return type based on specific parameter value

I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...

Hiding the last row of floated elements only if it is not an even row can be achieved using CSS

I am trying to find a quick and easy solution (either using CSS or jQuery) to hide the last row of floated elements if they are not even. Take a look at this JS Fiddle example: http://jsfiddle.net/cohhvfjn/ There is an issue when resizing the HTML contai ...

"Ensuring Username Uniqueness in AngularJS and CakePHP3: A Step-by-Step

<input type="email" id="username" dbrans-validate-async="{unique: isUsernameUnique}" ng-model="username" required class="form-control" name="username"> $scope.isUsernameUnique = function(username) { $http.get(url+'/isUsernameUnique&apo ...

Rails: Unable to manipulate the value of text_field using jquery

When a user selects an item from a list, I want to update the value of the item's codenumber field using jquery. Here is what my view looks like: <tr class="nested-fields"> <td style="width:180px"> <%= f.text_f ...

Encountered an error "Not Found" when attempting to establish an AJAX connection between Javascript and Rails

I'm having an issue with a simple Rails controller method. When I call it from JavaScript as an AJAX method, I get the error message "Not Found" in the JavaScript error log, even though the method works fine when accessed directly in the browser. What ...

Trying to organize JSON data by multiple parameters using jQuery

Regarding the topic discussed in this thread; I have successfully managed to sort an Array of JSON Objects by two fields. Additionally, the discussion mentions: "To include additional columns for sorting, simply add them to the array comparison." // ...

Navigating nested events with jQuery

Currently, I am dealing with a <span class="fold"></span> element that is controlled by the following jQuery code: $('.fold').click(function (event) { ... }); As new "fold" elements are added dynamically via ajax, I need to assign ...

The Node.js JSON string displays as "[object Object]" in the output

Front End // js / jquery var content = { info : 'this is info', extra : 'more info' } $.ajax({ type: 'POST', url: '/tosave', data: content }); Node // app.js app.post('/tosave', funct ...

Result of a callback function

Having trouble returning a value for form validation using a callback function. It's not working for me... <form action="loggedin.php" onsubmit="return test(valid)" method="post"> function test(callback) { var k = ""; var httpRequest = ...

How can I adjust the time in a range slider using AngularJS?

Currently, I am utilizing a Slider with draggable range in angular js for time selection. The Slider can be found here: https://jsfiddle.net/ValentinH/954eve2L/. I aim to configure the time on this slider to span from 00.00 to 24.00, with a 10-minute inter ...

Conducting various calculations and showcasing them all on a single webpage

Uncertain about what to name this, but let's see if you understand my question. I have a table on a standard HTML page and I am performing some calculations using Javascript/jQuery. Example: function addThem() { var result; result = userIn ...