My goal is to retrieve the data-id from a dynamically generated tree form using JsTree (which has checkboxes), but unfortunately, my current approach isn't working. To iterate over the checkboxes and account for multiple selections, I am utilizing the $.each() function. Here's a snippet of my script:
$(document).ready(function() {
$(".js-save-button").on('click', function(){
let boxes = check_checkboxes();
alert(JSON.stringify(boxes));
});
function check_checkboxes(){
let boxes_id = [];
let boxes = $(".js-categories-checkboxtree").jstree("get_checked", true);
$.each(boxes, function() {
//let id = jQuery(this); //getting info
//let id = (data.node.id); //not working
let id = $(this).data('id'); //not working
boxes_id.push(id);
});
return boxes_id;
}
});
Although I can successfully obtain the element with the following code (providing me only with the corresponding id):
let id = $(this).attr('id');
The problem arises when attempting to access specific data attributes like data-id, which results in a null value:
let id = $(this).data('id');
I even tried to display all available information about the element by using:
let id = jQuery(this)
Surprisingly, there are several data attributes present, but they cannot be accessed. Can anyone provide some suggestions or insights on how to overcome this issue?