Mr x Mr x - 6 months ago 98
HTML Question

Error while fetching selected nodes from jstree

I have written program which displays jstree along with the checkboxes.
I have written an event which checks the check box is selected or not so when I remove that code,
jstree gets visible aand when that code is there then tree doent get displayed.

Here is my code

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:300px; min-width:100px; padding:20px 10px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div id="frmt" class="demo"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jstree.min.js"></script>
<button>>></button>

<script>
var a=[{"id":"Name 1","text":"name1","children":[{"id":"Name 2","text":"Name 2"}]}];
</script>

<script>
$('#html').jstree();
$('#frmt').jstree({
'core': {
'data':a
},
"checkbox" : {
"whole_node" : false,
"keep_selected_style" : true,
"three_state" : true,
"tie_selection" : false
}, "search" : {
"fuzzy" : true
},"plugins" : [ "checkbox", "search" ]
});
$('#frmt').on("changed.jstree", function (e, data) {
console.log("Length : "+data.selected.length);
if(data.selected.length>0)
{
$(data.selected).each(function idx{
var node=data.data.instance.get_node(data.selected(idx));
console.log("Selected Node is : "+node.text);
});
}

});
$('button').on('click', function () {
alert($('#frmt').jstree("get_selected"));
});
</script>

</body>
</html>


So with this code, it doesn.t shows the jstree

when I remove

$('#frmt').on("changed.jstree", function (e, data) {
console.log("Length : "+data.selected.length);
if(data.selected.length>0)
{
$(data.selected).each(function idx{
var node=data.data.instance.get_node(data.selected(idx));
console.log("Selected Node is : "+node.text);
});
}

});


it shows the tree

Answer

The event gets fire for each and every selection and deselection of checkbox. Also you are traversing through the all nodes for checking the selected nodes. You can simple do the following

var selected_nodes_list=$('#frmt').jstree("get_selected")

then traverse through each and every element of this tis variable using slice and all is done.

Comments