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); }
}
};
}
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 using a jstree custom context menu and Im trying to define the create option. I already have a button that performs the intended logic, however it is on a different page. How would I go about using javascript/jQuery to call a button that is on a different page?
Here is my context menu in the javascript file in my page called middlenav.aspx. The button I wish to reference is on a page called navbar.aspx
UPDATE: I was able to get it partially working. I can call the button but it causes my current page to refresh. How can I avoid refreshing the current page middlenav.aspx?
"contextmenu": {
"items": function ($node) {
return {
"Create": {
"label": "Create",
"action": function (obj) {
createItem(obj);
}
},
"Rename": {
"label": "Edit",
"action": function (obj) {
this.rename(obj);
}
},
"Delete": {
"label": "Delete",
"action": function (obj) {
this.remove(obj);
}
}
};
}
},
// Updated
function createItem(obj) {
$.ajax({
url: "navbar.aspx",
success: function (data) {
$('body').append(data);
$("#btnNewItem").click();
}
});
I'm not sure if this is the most effective way, but I was able to accomplish it with the following function:
function createItem(obj) {
$.get("navbar.aspx", function (data) {
$('myHiddenDiv').append(data);
$("#btnNewItem").click();
window.stop();
});
}
i have been trying to figure this out lately but i can't
the problem is that i have an input field with type text that i need to get the current input data when the values from the autocomplete are selected. Note i am using jQuery UI autocomplete.
i can catch the keyup event but when a user uses clicks on the autocomplete values. jQuery does not fire the change event handler, i tried using every event handler there is but to no avail.
i think it cannot catch a DOM based manipulation of an element? i'm not sure. here is a
fiddle
Like this http://jsfiddle.net/PUpRr/
select options should do the trick.
Options/events/methods API documentation : http://api.jqueryui.com/autocomplete/
Hope this fits the needs :)
Sample code
$("#to").autocomplete({
source: function (request, response) {
var friendsArray = [];
friendsArray = [{
"id": 1,
"name": "hulk",
"value": "hulk"
}, {
"id": 2,
"name": "ironman",
"value": "ironman"
}, {
"id": 3,
"name": "Foobar",
"value": "Foobar"
}];
response(friendsArray);
return;
},
select: function (e, ui) {
alert("selected!");
},
change: function (e, ui) {
alert("changed!");
}
});
Chrome had issues retaining the ui for clicked changes, so I added a mousedown handler for the individual popup list anchor tags in the autocomplete open: event. It's also a good place for styling the list:
function onItemTypeAheadListOpen(e, ui) {
// Stub for list click issues
$('.ui-autocomplete a').mousedown(function () {
lastItemClicked = this.innerText;
});
// Override default list style
$('.ui-autocomplete').css('z-index', '600');
$('.ui-autocomplete').css('width', '480px');
}
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'm trying to capture the name of the newly created node with jstree's contextmenu. I can capture the name of the parent node that I'm adding the new node under (with obj.text()), however, what I really need is the name of the newly created node.
So, somehow, there needs to be an "onChange" event that can be called within jstree contextmenu that fires once the user hits enter on that newly created node?
Any ideas? I've enclosed the contextmenu code:
}).jstree({
json_data: {
data: RBSTreeModel,
ajax: {
type: "POST",
data: function (n) {
return {
NodeID: n.attr("id").substring(4),
Level: n.attr("name").substring(7)
};
},
url: function (node) {
return "/Audit/GetRequirementsTreeStructure";
},
success: function (new_data) {
return new_data;
}
}
},
contextmenu: {
items: function($node) {
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); }
}
};
}
},
plugins: ["themes", "json_data", "ui", "crrm", "contextmenu"]
});
You can bind to the "create.jstree" event, which will fire after a node is created. In the callback of that event, you will have access to the newly created node and can rollback/revert the create node action if you choose. The documentation for it is lacking, but there is an example on the demo page. Here is another example that came from my code:
}).jstree({... You jstree setup code...})
.bind("create.jstree", function(e, data) {
// use your dev tools to examine the data object
// It is packed with lots of useful info
// data.rslt is your new node
if (data.rslt.parent == -1) {
alert("Can not create new root directory");
// Rollback/delete the newly created node
$.jstree.rollback(data.rlbk);
return;
}
if (!FileNameIsValid(data.rslt.name)) {
alert("Invalid file name");
// Rollback/delete the newly created node
$.jstree.rollback(data.rlbk);
return;
}
.. Your code etc...
})
Based on Bojin Li's answer, it seems that the latest version of jsTree uses the event "create_node" instead of "create":
}).jstree({... You jstree setup code...})
.bind("create_node.jstree", function(e, data) {
...
});