Mr x Mr x - 6 months ago 40
HTML Question

Generating jstree on the fly

I am trying to generate jstree on the fly on button click.
I have one jstree and user will select the entities from that tree.
And I would like to show that tree in the selected tab in tree format itself.

So below code works fine if I use variable aka as it is.
But I just want to show the first name from that string for that I am formating it in jstree json data format.
Then it does not works.
But I have tried to copy and paste generated text in another jstree then it works.
Means it is not displayin that new tree on the go but on another page if I pass the same string then it shows me the tree.

here is my code

<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 { font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 400px;float: left }
.demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 400px; float: right}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>

<body><div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
<script>
function callGraph(akn) {
var c = akn + "";
var spl = c.split("!");
var dt = "[{\"text\":\"DC=test,DC=in\",\"children\":[";
var cnt = spl.length - 1;
for (q = 0; q < cnt; q++) {
if (spl[q].startsWith(","))
dt += "{\"text\":\"" + spl[q].split(",")[1] + "\"},";
else
dt += "{\"text\":\"" + spl[q].split(",")[0] + "\"},";
}
dt += "]}]";
console.log(dt);

$('#frmt1').jstree({
'core': {
'data': dt;
},
"checkbox": {
"whole_node": false,
"keep_selected_style": true,
"three_state": true,
"tie_selection": false
}, "search": {
"fuzzy": true
}, "plugins": ["checkbox", "search"]
});
$('#frmt1').jstree(true).settings.core.data = dt;
$('#frmt1').jstree(true).refresh();
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jstree.min.js"></script>
<button>>></button>

<script>
$('#html').jstree();
$('#frmt').jstree({
'core': {
'data':<%= session.getAttribute("PATH")%>
},
"checkbox": {
"whole_node": false,
"keep_selected_style": true,
"three_state": true,
"tie_selection": false
}, "search": {
"fuzzy": true
}, "plugins": ["checkbox", "search"]
});

$('button').on('click', function () {
a = $('#frmt').jstree("get_checked");
callGraph(a);
// window.location = "read.jsp?name="+a;
});

</script>

</body>
</html>

Answer

You need to remove double-quotes near and backslash double-quotes near dt. Following will help you.

  var dt = [{"text":"DC=test,DC=in","children":[;
                var cnt = spl.length - 1;
                for (q = 0; q < cnt; q++) {
                    if (spl[q].startsWith(","))
                        dt += {"text":" + spl[q].split(",")[1] + "},;
                    else
                        dt += {"text":" + spl[q].split(",")[0] + "},;
                }
                dt += ]}];