We Keep Coding

jsTree checkbox events not firing

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.

Jstree context menu supress changed event on select_node right click

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); }
}
};
}

How to set flowplayer fullscreen option to false (not iframe)

Could you help me and answer how to set fullscreen in flowplayer to FALSE.
The code i use is:
$(document).ready(function () {
$("#player").flowplayer({
playlist: [
[{ webm: "http://.../file.webm "},
{ mp4: "http://.../file.mp4 "}]
]
});
});
And where and how i should write the option (fullscreen:false)?

You can disable fullscreen mode for all players on a page by overwriting the default settings of the global flowplayer object. For your example, it would look like this:
$(document).ready(function () {
//overwrites fullscreen: true in flowplayer.defaults
flowplayer.config = { fullscreen: false; }
$("#player").flowplayer({
playlist: [
[
{ webm: "http://.../file.webm"},
{ mp4 : "http://.../file.mp4 "}
]
]
});
});
I'm not sure if there's an easy way to change settings for individual players.
// edit: there actually is, as documented here: https://flowplayer.org/docs/setup.html#selective-configuration

Thank you for your answer, Phil !! But your variant unfortunately doesn't work in my script((
The following script works:
<script>$(document).ready(function () {
$("#player").flowplayer({
playlist: [
[{ webm: "http://.../file.webm "},
{ mp4: "http://.../file.mp4 "}]
],
fullscreen: false,
tooltip: false
});
});</script>

JsTree contextmenu error

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
:)

is it possible to override sencha touch carousel previous and next functions?

I am using sencha touch to develop mobile website.
Ext.setup( {
onReady: function() {
new Ext.Carousel({
fullscreen: true,
items: [
{
html: "Item1"
},
{
html : "Item2"
}
]});};});
is what i use. But is it possible to override next() and prev() functions. Actually i want to do something inside those function and then call parent.next() i mean same function .
Any help??
I saw the link http://www.sencha.com/forum/showthread.php?110036-Override-Method
But i cant understand that

Refer this code for your requirement.
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
launch: function () {
Ext.define('MyApp.view.inbox.MyInbox', {
extend: 'Ext.Carousel',
config: {
itemId:'test',
fullscreen: true,
items: [{
html: "Item1"
},{
html : "Item2"
}]
},
next:function(){
//Do your thing
//This code will call the next in the super class
this.callParent(arguments);
},
prev:function(){
//Do your thing
//This code will call the prev in the super class
this.callParent(arguments);
}
});
Ext.create('MyApp.view.inbox.MyInbox');
}
});