Mr x Mr x - 6 months ago 17
Javascript Question

Fetch text while clicking on jschart entity

I have implemented jstree in html and providing data as input from json.
When I click on

root node
then it just shows me
j1_5
or any
id
of that node. I want to fetch the Text given to that node so how can I do this?
Here is my file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jstree basic demos</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:800px; min-width:300px; margin:0 auto; 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>
<h1>HTML demo</h1>

<h1>Data format demo</h1>
<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>
// html demo
$('#html').jstree();
$('#frmt').jstree({
'core' : {
'data' : [
{

"text" : "Root node",
"icon" : "http://jstree.com/tree-icon.png",
"state" : { "opened" : true },
"children" : [
{
"text" : "Child node 1",
"icon" : "jstree-file",
"children" : [
{
"text" : "Child node 1",
"icon" : "jstree-file",
},
{ "text" : "Child node 2" }
]
},
{ "text" : "Child node 2" }
]
}
]
}
});
$('#frmt').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
$('button').on('click', function () {
alert($('#frmt').jstree("get_selected"));
});
</script>
</body>
</html>

Answer

You just need to specify ID attribute to get the value from node. This will help you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jstree basic demos</title>
    <style>
    html { margin:0; padding:0; font-size:62.5%; }
    body { max-width:800px; min-width:300px; margin:0 auto; 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>
    <h1>HTML demo</h1>

    <h1>Data format demo</h1>
    <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>
    // html demo
    $('#html').jstree();
    $('#frmt').jstree({
        'core' : {
            'data' : [
                {

                    "text" : "Root node",
                                        "icon" : "http://jstree.com/tree-icon.png",
                    "state" : { "opened" : true },
                    "children" : [
                        {
                            "text" : "Child node 1",
                            "icon" : "jstree-file",
                      "children" : [
                        {
                            "id":"MyID",
                            "text" : "Child node 1",
                            "icon" : "jstree-file",
                        },
                        {"id" : "Sub Name 2", "text" : "Child node 2" }
                    ]
                        },
                        { "id" : "NAME 2","text" : "Child node 2" }
                    ]
                }
            ]
        }
    });
$('#frmt').on("changed.jstree", function (e, data) {
                    console.log(data.selected);
                });
$('button').on('click', function () {
                    alert($('#frmt').jstree("get_selected"));
                });
    </script>
</body>
</html>
Comments