Get ID of Parent and Children
3,164 views
Skip to first unread message
TheDNN
Feb 8, 2011, 11:52:57 PM2/8/11
to jsTree, thedn...@gmail.com
Hello!
Probably there is a solution somewhere in this group or on the
internet.
But so far I didn't manage to accomplish the following (simple?)
thing. :((
Can you help me achieve the following??
TREE (data in JSON) -> see also my code
===============================
PARENT 1
- Child A
- Child B
PARENT 2
- Child C
- Child D
BEHAVIOUR I WANT:
=================
When clicked on node checkbox:
1a. Checkbox click PARENT 1 -> get Parent_1_ID AND all the ID's of
this parent children
-> EXAMPLE RESULT: "Parent 1 ID" + "Child A ID" + "ChildID B ID"
1b. If clicked on Child -> return the single ID of this only child ->
EXAMPLE RESULT: "Child C ID"
--> For the sake of simplicity let's just alert(); the ID's as -->
"parentid_childidA_childidB"
1c. CHILDren have also an ID
(didn't manage to figure out from the documentation how to add an id
to a child)
MY CODE (the only *useful part* so far)
=============================
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
"data": {"title": "Parent 1"},
"attr": { "id" : "Parent_1_ID" },
"children": [ "Child A", "Child
B" ]
},
{
"data" : {"title" : "Parent 2",
"attr" : { "id" :
"alert('Parent_2_ID');" },
"children": [ "Child C", "Child
D" ]
}
}
]
},
"plugins" : ["checkbox", "themes",
"json_data", "ui"]
})
});
all help would be appreciated!!
Probably there is a solution somewhere in this group or on the
internet.
But so far I didn't manage to accomplish the following (simple?)
thing. :((
Can you help me achieve the following??
TREE (data in JSON) -> see also my code
===============================
PARENT 1
- Child A
- Child B
PARENT 2
- Child C
- Child D
BEHAVIOUR I WANT:
=================
When clicked on node checkbox:
1a. Checkbox click PARENT 1 -> get Parent_1_ID AND all the ID's of
this parent children
-> EXAMPLE RESULT: "Parent 1 ID" + "Child A ID" + "ChildID B ID"
1b. If clicked on Child -> return the single ID of this only child ->
EXAMPLE RESULT: "Child C ID"
--> For the sake of simplicity let's just alert(); the ID's as -->
"parentid_childidA_childidB"
1c. CHILDren have also an ID
(didn't manage to figure out from the documentation how to add an id
to a child)
MY CODE (the only *useful part* so far)
=============================
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
"data": {"title": "Parent 1"},
"attr": { "id" : "Parent_1_ID" },
"children": [ "Child A", "Child
B" ]
},
{
"data" : {"title" : "Parent 2",
"attr" : { "id" :
"alert('Parent_2_ID');" },
"children": [ "Child C", "Child
D" ]
}
}
]
},
"plugins" : ["checkbox", "themes",
"json_data", "ui"]
})
});
all help would be appreciated!!
roman stachura
Feb 9, 2011, 12:51:12 PM2/9/11
to jst...@googlegroups.com
Am 09.02.2011 18:34, schrieb TheDNN:
> In short said I would like to get the ID of a node in jsTree.
.bind("select_node.jstree", function (e, data) {
> In short said I would like to get the ID of a node in jsTree.
.bind("select_node.jstree", function (e, data) {
var node_id;
data.rslt.obj.each(function () {
node_id = this.id.replace("node_","");
})
alert(node_id);
});
> The documentation isn't clear about this.
>
> Do you have the solution for this?
TheDNN
Feb 9, 2011, 12:34:59 PM2/9/11
to jsTree
In short said I would like to get the ID of a node in jsTree.
The documentation isn't clear about this.
Do you have the solution for this?
On Feb 9, 5:52 am, TheDNN <thednng...@gmail.com> wrote:
Do you have the solution for this?
On Feb 9, 5:52 am, TheDNN <thednng...@gmail.com> wrote:
TheDNN
Feb 9, 2011, 2:51:21 PM2/9/11
to jsTree
Roman, thanks for your reply!
Unfortunately the 'bind' is not working.
Here my code:
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
//"data" : "A node",
"data" : {"title": "Some Title"},
"attr" : { "id" : "Some Title
ID" },
"children" : [ "Child 1", "Child
2" ]
},
{
"attr" : { "id" :
"li.node.id1A" },
"data" : {"title" : "Long format
demo", "attr" : { "href" : "#" }
Unfortunately the 'bind' is not working.
Here my code:
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
"data" : {"title": "Some Title"},
"attr" : { "id" : "Some Title
ID" },
"children" : [ "Child 1", "Child
2" ]
},
{
"attr" : { "id" :
"li.node.id1A" },
"data" : {"title" : "Long format
demo", "attr" : { "href" : "#" }
}
}
]
},
"plugins" : ["checkbox", "themes",
"json_data", "ui"]
})
});
$("#demo1").bind("select_node.jstree", function (e,
}
]
},
"plugins" : ["checkbox", "themes",
"json_data", "ui"]
})
});
data) {
var node_id;
data.rslt.obj.each(function () {
node_id = this.id.replace("node_","");
})
alert(node_id);
});
Am I doing something wrong or do I oversee something??
var node_id;
data.rslt.obj.each(function () {
node_id = this.id.replace("node_","");
})
alert(node_id);
});
roman stachura
Feb 9, 2011, 3:08:05 PM2/9/11
to jst...@googlegroups.com
Am 09.02.2011 20:51, schrieb TheDNN:
> Roman, thanks for your reply!
> Unfortunately the 'bind' is not working.
Not working at all?> Roman, thanks for your reply!
> Unfortunately the 'bind' is not working.
Any error messages?
try this:
$("#demo1").bind("select_node.jstree", function (e, data) {
data.rslt.obj.each(function () {
alert(this.id);
})
});
TheDNN
Feb 10, 2011, 12:34:48 AM2/10/11
to jsTree
Roman,
Unfortunately it still doesn't work.
No event is getting fired at all............ :((
I added the part of the code you gave me, but still no succes!
I will bring things to a broader scope by pasting my *whole* source.
===============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>jsTree</title>
<link rel="stylesheet" type="text/css" href="_http://
static.jstree.com/layout.css" />
<script type="text/javascript" src="javascripts/jquery.js"></
script>
<script type="text/javascript" src="javascripts/
jquery.cookie.js"></script>
<script type="text/javascript" src="javascripts/
jquery.hotkeys.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></
script>
</head>
<body>
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
<div id="demo1" class="demo"></div>
</body>
</html>
===============================
Can you be so kind to re-check again using my source code?
Does the my code work for you?
Unfortunately it still doesn't work.
No event is getting fired at all............ :((
I added the part of the code you gave me, but still no succes!
I will bring things to a broader scope by pasting my *whole* source.
===============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>jsTree</title>
<link rel="stylesheet" type="text/css" href="_http://
static.jstree.com/layout.css" />
<script type="text/javascript" src="javascripts/jquery.js"></
script>
<script type="text/javascript" src="javascripts/
jquery.cookie.js"></script>
<script type="text/javascript" src="javascripts/
jquery.hotkeys.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></
script>
</head>
<body>
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
"data" : {"title": "Some Title"},
"attr" : { "id" : "Some Title ID" },
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : { "id" :
"li.node.id1A" }, "data" :
{"title" : "Long format demo", "attr" : { "href" : "#" }
}
}
]
},
"plugins" : ["checkbox", "themes", "json_data",
"ui"]
})
});
$("#demo1").bind("select_node.jstree", function (e, data)
{
</script>
"attr" : { "id" : "Some Title ID" },
"children" : [ "Child 1", "Child 2" ]
},
{
"attr" : { "id" :
"li.node.id1A" }, "data" :
{"title" : "Long format demo", "attr" : { "href" : "#" }
}
}
]
},
"plugins" : ["checkbox", "themes", "json_data",
"ui"]
})
});
$("#demo1").bind("select_node.jstree", function (e, data)
{
<div id="demo1" class="demo"></div>
</body>
</html>
===============================
Can you be so kind to re-check again using my source code?
Does the my code work for you?
roman stachura
Feb 10, 2011, 2:50:30 AM2/10/11
to jst...@googlegroups.com
Am 10.02.2011 06:34, schrieb TheDNN:
> Roman,
>
> Unfortunately it still doesn't work.
> No event is getting fired at all............ :((
> I added the part of the code you gave me, but still no succes!
>
> I will bring things to a broader scope by pasting my *whole* source.
> Roman,
>
> Unfortunately it still doesn't work.
> No event is getting fired at all............ :((
> I added the part of the code you gave me, but still no succes!
>
> I will bring things to a broader scope by pasting my *whole* source.
So I found it ;-)
http://www.stachura.ch/jstree_test.html#
check out the source and pay attention the plugin section.
regards roman
>
> ===============================
>
> [..]
roman stachura
Feb 10, 2011, 3:02:20 AM2/10/11
to jst...@googlegroups.com
The
http://www.jstree.com/documentation/ui
UI plugin handles
selecting, deselecting and hovering tree items.http://www.jstree.com/documentation/ui
Patrice
Feb 10, 2011, 4:13:03 AM2/10/11
to jsTree
Hi,
I use this to get node ID
$("#divtree").bind("select_node.jstree", function(e,data){
alert(data.rslt.obj.attr("id"));
alert(data.inst.get_text());
alert(data.rslt.obj.attr("rel"));
});
My be Ok for you
(sorry for my English )
Regards
Patrice
I use this to get node ID
$("#divtree").bind("select_node.jstree", function(e,data){
alert(data.rslt.obj.attr("id"));
alert(data.inst.get_text());
alert(data.rslt.obj.attr("rel"));
});
My be Ok for you
(sorry for my English )
Regards
Patrice
TheDNN
Feb 10, 2011, 4:41:10 PM2/10/11
to jsTree
WOW!!
You made it work. I will dig tomorrow in it and see the details.
If you can leave the example for a few more days would be great.
Eventough: is it possible to make this also work with the
'checkboxes'? :))
That is what I initially was trying.
[ps. let me know where you are so I can buy you a beer for this
favour]
You made it work. I will dig tomorrow in it and see the details.
If you can leave the example for a few more days would be great.
Eventough: is it possible to make this also work with the
'checkboxes'? :))
That is what I initially was trying.
[ps. let me know where you are so I can buy you a beer for this
favour]
TheDNN
Feb 15, 2011, 10:01:26 AM2/15/11
to jsTree
Roman,
do you also know how to make this work *with* checkboxes?
do you also know how to make this work *with* checkboxes?
Kheang
Feb 15, 2011, 10:57:11 AM2/15/11
to jsTree
I use this for checkboxes, if it helps...
$("#container").jstree("get_checked",false,true).each(function(key,
value){
// get id
var current_id = $(value).attr("id")
alert(current_id);
});
I use XML method though, and my nodes each have an id attribute.
The false, true I read in previous posts makes the get_checked
function return all the checked nodes parent and child.
> > The|UI|plugin handles selecting, deselecting and hovering tree items.http://www.jstree.com/documentation/ui- Hide quoted text -
>
> - Show quoted text -
$("#container").jstree("get_checked",false,true).each(function(key,
value){
// get id
var current_id = $(value).attr("id")
alert(current_id);
});
I use XML method though, and my nodes each have an id attribute.
The false, true I read in previous posts makes the get_checked
function return all the checked nodes parent and child.
>
> - Show quoted text -
mvwd
Feb 15, 2011, 6:27:15 PM2/15/11
to jsTree
...if you want jsTree to do something on checking a box, you'll have
to bind to the "check_node"-event:
$('#jsTree-ID')
.jstree({ ...core... })
.bind('check_node.jstree', function(e, data){
console.log('ID of checked node:'+data.rslt.obj.attr('id') );
console.log('ID of parent node:'+
(data.inst._get_parent(data.rslt.obj)==-1?'checked node is
root!':data.inst._get_parent(data.rslt.obj).attr('id')) );
console.log('ID of child-nodes:');
data.rslt.obj.find('li').each(function(i){
console.log( 'ID child('+i+'):'+$(this).attr('id'));
});
});
data.rslt.obj => is the current checked node
data.inst._get_parent(data.rslt.obj) => returns the parent-object (or
-1 if node is the root-node)
data.rslt.obj.find('li') => returns all 'li'-childs
Markus.
to bind to the "check_node"-event:
$('#jsTree-ID')
.jstree({ ...core... })
.bind('check_node.jstree', function(e, data){
console.log('ID of checked node:'+data.rslt.obj.attr('id') );
console.log('ID of parent node:'+
(data.inst._get_parent(data.rslt.obj)==-1?'checked node is
root!':data.inst._get_parent(data.rslt.obj).attr('id')) );
console.log('ID of child-nodes:');
data.rslt.obj.find('li').each(function(i){
console.log( 'ID child('+i+'):'+$(this).attr('id'));
});
});
data.rslt.obj => is the current checked node
data.inst._get_parent(data.rslt.obj) => returns the parent-object (or
-1 if node is the root-node)
data.rslt.obj.find('li') => returns all 'li'-childs
Markus.
TheDNN
Feb 15, 2011, 10:02:32 PM2/15/11
to jsTree
Markus, Roman, (and the rest of the clever brains!),
I didn't manage to make the binding on the *checknode.jstree" event
work.
I neither have the impression that I forgot something. To be sure I
paste my source code here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
"data" : "A node",
"children" : [
{
"attr" : { "id" : "Node_3" },
"data" : "Child 1"
},
{
"attr" : { "id" : "Node_4" },
"data" : "Child 2"
}
]
},
{
"attr" : { "id" : "li.node.id" },
"ui", "checkbox"]
});
});
$("#demo1").bind("check_node.jstree", function (e, data){
alert("check_node event is going to be fired:");
console.log('ID of checked node:' +
I checked: the plugins too, did I forget something? Or do the plugins
must be in a certain order?
I didn't manage to make the binding on the *checknode.jstree" event
work.
I neither have the impression that I forgot something. To be sure I
paste my source code here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="_http://
static.jstree.com/layout.css" />
<script type="text/javascript" src="javascripts/jquery.js"></
script>
<script type="text/javascript" src="javascripts/
jquery.cookie.js"></script>
<script type="text/javascript" src="javascripts/
jquery.hotkeys.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></
script>
</head>
<body>
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
"attr" : { "id" : "Node_395" },
static.jstree.com/layout.css" />
<script type="text/javascript" src="javascripts/jquery.js"></
script>
<script type="text/javascript" src="javascripts/
jquery.cookie.js"></script>
<script type="text/javascript" src="javascripts/
jquery.hotkeys.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></
script>
</head>
<body>
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
"data" : "A node",
"children" : [
{
"attr" : { "id" : "Node_3" },
"data" : "Child 1"
},
{
"attr" : { "id" : "Node_4" },
"data" : "Child 2"
}
]
},
{
"attr" : { "id" : "li.node.id" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"plugins" : ["themes", "json_data", "cookies",
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"ui", "checkbox"]
});
});
$("#demo1").bind("check_node.jstree", function (e, data){
alert("check_node event is going to be fired:");
console.log('ID of checked node:' +
data.rslt.obj.attr('id'));
console.log('ID of parent node:' +
(data.inst._get_parent(data.rslt.obj)==-1?'checked node is
root!':data.inst._get_parent(data.rslt.obj).attr('id')));
console.log('ID of child-nodes:');
data.rslt.obj.find('li').each(function(i){
console.log( 'ID child('+i+'):'+$
(this).attr('id'));
console.log('ID of parent node:' +
(data.inst._get_parent(data.rslt.obj)==-1?'checked node is
root!':data.inst._get_parent(data.rslt.obj).attr('id')));
console.log('ID of child-nodes:');
data.rslt.obj.find('li').each(function(i){
console.log( 'ID child('+i+'):'+$
(this).attr('id'));
});
});
</script>
<div id="demo1" class="demo"></div>
</body>
</html>
Can you help by taking a look?
});
</script>
<div id="demo1" class="demo"></div>
</body>
</html>
I checked: the plugins too, did I forget something? Or do the plugins
must be in a certain order?
mvwd
Feb 16, 2011, 2:06:13 AM2/16/11
to jsTree
Just a little simple error: seems you put the code in the wrong place.
You have to write the .bind()... within the $(function()
{ ...here!!.. });
And: better use: $(document).ready(function(){ ...code... });
Markus.
You have to write the .bind()... within the $(function()
{ ...here!!.. });
And: better use: $(document).ready(function(){ ...code... });
Markus.
Reply all
Reply to author
Forward
0 new messages