I am using jstree, and would like to bind my own click event to each of the nodes....
This is what i am trying....
$("#demo1").jstree({
"core": { "initially_open": ["root"] },
"html_data": {
"data": out
},
"plugins": ["themes", "html_data"]
}).bind("select_node.jstree",
function (e, data)
{
alert(data.rslt.obj.data("id")); });
I am using the HTML_Plugin, setting the out variable to look like this
"<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>"
trouble is, the click event does not appear to be firing, as i do not see the alert message.
Please show me the error in my ways.
thanks
tony
Remove the following attribute from your code and try, the out variable would give you "out not defined error."
"html_data": {
"data": out
},
$("#demo1").jstree({
"core": { "initially_open": ["root"] },
"html_data": {
"data": out
},
"plugins": ["themes", "html_data", "ui"]
}).bind("select_node.jstree", function (e, data) {
var id = data.rslt.obj.attr("id");
var parent = data.inst._get_parent(data.rslt.obj);
if (parent == -1) {
alert(id);
} else {
alert(parent.find('a').first().text() + "|" + id);
}
});
One thing was needed... addition of the plug in UI
Related
I'm having trouble getting checkbox events to fire, specifically enable_checkbox and disable_checkbox
My code to init jsTree is:
$('#contenteditor-hierarchy').jstree({
"plugins": [
"checkbox"
],
"checkbox": {
"visible": true,
"tie_selection": false,
"whole_node": false
},
"core": {
"check_callback": true,
"data": {
"url": function (node) {
//...
},
"type": "get",
"data": function (node) {},
"dataType": 'json'
}
}
});
and I have tried:
$tree.bind('enable_checkbox.jstree', function() {
alert('test');
});
// and...
$('#contenteditor-hierarchy').on('enable_checkbox.jstree', function() {
alert('test');
});
// as well as..
$(document).on('enable_checkbox.jstree', function() {
alert('test');
});
for the interim, a not so classy hack; the below works for me:
$('body').on('click', '.jstree-checkbox', function(e) {
// at the time of this event firing, jstree hadn't finished handling the click event
// so I had to timeout....
setTimeout(function() {
console.log($tree.jstree(true).get_checked());
}, 200);
});
However in neither attempt was an alert actually fired.
The API docs is quite vague so wondering if anyone is aware of where I am going wrong.
Based on the code with the click event and the setTimeout, I would say that what you are trying to achieve is to set an event to detect when the checkbox is checked or unchecked.
If that is the case, you should use the events check_node.jstree and uncheck_node.jstree respectively.
Im trying to find a way I can suppress the changedevent in jstree when loading a dynamic context menu (right click). I'm aware that you can suppress the select_node event in the context menu but I need to get the node id of the node that I am right clicking on. (and therefore need to use the select_node). I know that you can suppress that changed event when calling select_node regularly, but I'm not sure how to do it when right clicking. I tried the following with the context menu select_node, but it did not work:
$(function () {
$('#myTree').jstree({
"core": {
"themes": {
"variant": "small",
"icons": false
}
},
"contextmenu": {
"items": reportMenu(node), //builds context menu based on selected node
},
"plugins": ["contextmenu", "changed"]
});
});
$("#myTree").bind('select_node.jstree', function (event, data) {
// Does not work, changed event still fires.
$("#myTree").jstree().select_node(data.node.id, true);
});
I'm looking for one of the possible alternatives:
How can I suppress the changedevent when the context menu calls select_node?
How can I get the id of the node I am right clicking on without calling the select_node event (i.e. If I set my contextmenu to 'select_node': false, how can I capture the select node)?
Finally, I think you can get what you want changing your code a little.
Check demo - codepen.
$('#myTree')
.jstree({
'core': {
'data': ...
},
'plugins': ["contextmenu"],
'contextmenu': {
'select_node': false,
'items': reportMenu
}
});
function reportMenu(node) {
// access node as: node.id);
// build your menu depending on node id
return {
createItem: {
"label": "Create New Branch",
"action": function(obj) {
this.create(obj);
alert(obj.text())
},
"_class": "class"
},
renameItem: {
"label": "Rename Branch",
"action": function(obj) { this.rename(obj); }
},
deleteItem: {
"label": "Remove Branch",
"action": function(obj) { this.remove(obj); }
}
};
}
A javascript error indicating that this.rename(obj) is not defined when selecting to rename a node.
JavaScript runtime error: Object doesn't support property or method 'rename'
$(document).ready(function () {
$('#marketing-category-tree').jstree({
themes: {
theme: "default",
dots: true,
icons: true
},
contextmenu: {
items: {
"rename" : {
"label": "Rename",
"action": function (obj) { this.rename(obj); }
}
}
},
plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
})
.bind("rename.jstree", function (e, data) {
debugger;
alert("RENAMING!!!");
});
});
I have also tried the following code and am able to select and do a rename but cannot capture the change event.
$('#marketing-category-tree').jstree({
themes: {
theme: "default",
dots: true,
icons: true
},
plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
})
.bind("rename.jstree", function (e, data) {
alert("RENAMING!!!");
});
I think the method you are looking for is edit. But first you have to get the node of the tree. Try to use this code below:
...
"contextmenu" : {
"items" : renameItem : { // The "rename" menu item
label : "Rename",
action : function (obj) {
n = $('#marketing-category-tree').jstree(true).get_node(obj.reference); //get node
$('#marketing-category-tree').jstree(true).edit(n); //puts the node into edit mode
}
}
}
...
HTH
Your first code example ain't gonna work because
"action": function (obj) { this.rename(obj); }
in this case "this" is a point to Window object the next things is that documentation http://www.jstree.com/api/ doesn't have mentions of method rename and only rename_node
Here is the working example (right click at any node and then click on rename)
http://jsfiddle.net/w9snc6z1/4/
Pay attention that rename_node also not working but according to documentation
set_text: set the text value of a node. Used internally, please use rename_node(obj, val).
it's not recommended to use set_text instead of rename_node.
you should get node of the tree with var tree = $("#marketing-category-tree").jstree(true);then operate on nodes.
u can use this example
goodluck
:)
I would like to display a fancybox when a user clicks the Create button to have them fill in a form. This is used to capture additional data and associate it with the newly created node in jsTree. I need to get the ID of the newly created node and pass it along as a GET parameter in the fancybox call. So far I just can't seem to figure out how to get the ID.
Here is what I have so far:
$("#demo").jstree({
// List of active plugins
"plugins" : ["themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu", "unique"],
.bind("create.jstree", function (e, data) {
$.post(
"server.php",
{
"operation" : "create_node",
"id" : data.rslt.parent.attr("id").replace("node_",""),
"position" : data.rslt.position,
"title" : data.rslt.name,
"type" : data.rslt.obj.attr("rel")
},
function (r) {
if(r.status) {
$(data.rslt.obj).attr("id", "node_" + r.id);
}else{
$.jstree.rollback(data.rlbk);
}
}
);
})
$("#demo").bind("before.jstree", function (e, data) {
if(data.func === "create") {
var id = data.args[0].attr("id").replace("node_","");
showFancybox("edit_task.php?action=create&parent_id="+id);
}
})
// Code for the menu buttons
$(function () {
$("#mmenu input").click(function () {
switch(this.id) {
case "add_default":
case "add_folder":
$("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
break;
case "search":
$("#demo").jstree("search", document.getElementById("search_text").value);
break;
case "text": break;
default:
$("#demo").jstree(this.id);
break;
}
});
});
The code that I have now finds the parent id before the new node is created. I tried waiting a few seconds and then trying to read the newest entry from the database, but this doesn't work very reliably and is slower than needed. How can I get the new node's ID from jsTree once it's been created and added to the database?
This works:
id = data.args[0].attr("id");
I am using jstree for a tree view in a web page.
The tree makes possible to rename and move nodes. Moving or renaming a node fires the rename_node.jstree and rename_node.jstree events.
With new nodes (created with rename_node.jstree events), the node can still be renamed and moved but the move_node.jstree and rename_node.jstree events are not fired.
It seems that the events are only bound with the inital nodes. I don't see any 'live' method to bind the events with nodes created after.
Is there any possibility to do that?
Here is a sample that helps (I hope) to understand my problem:
$(function(){
$("#nodes").jstree({
"plugins" : [ "themes", "html_data", "dnd", "ui", "crrm" ]
}).bind("move_node.jstree", function (event, data) {
alert('move');
}).bind("rename_node.jstree", function (event, data) {
alert('rename');
}).bind("create_node.jstree", function (event, data) {
alert('create_node');
})
$("#create_button").click(function () {
$("#nodes").jstree("create",null,"last",{data:"name"});
});
});
The command is create_node, not create, I think. See http://www.jstree.com/documentation/core for more details.
FYI, your code would be better written as:
$(function() {
$("#nodes").jstree({
"plugins": ["themes", "html_data", "dnd", "ui", "crrm"]
}).bind("move_node.jstree rename_node.jstree create_node.jstree", function(event, data) {
var type = event.type;
alert(type);
if (type === 'move_node.jstree') {
//handle move_node.jstree here
} else if (type === 'rename_node.jstree') {
//handle rename_node.jstree here
} else if (type === 'create_node.jstree') {
//handle create_node.jstree here
}
});
$("#create_button").click(function() {
$("#nodes").jstree("create", null, "last", {
data: "name"
});
});
});
I know that is subjective, but take it for what is worth.
It seems that the events are fired correctly. The problem was somewhere in the logic. I had to set the id of the item too to be handled correctly.
$("#nodes").jstree("create",null,"last",{data:the_name, attr: {id: the_id}});
Sorry for this mistake.