changed.jstree event not working in jstree inside of class method - javascript

I am working on jstree checkbox plugin and I want to get the checked and unchecked state of the checkbox items. The changed.jstree event is not working in the _setEvents() method. But it is working fine when I add the event inside of _setTree() method. I need to get the event trigger in _setEvents() method.
This is the code I am using:
export default class Test {
constructor(container) {
this._tab = null;
this._container = container;
this._setEvents();
}
get tab() {
return this._tab;
}
show(data) {
this._data = data;
this._setTree();
return this;
}
_setEvents() {
const self = this;
$(document)
.on('click', '#js-image-container', () => {
$('#js-image-uploader').trigger('click');
});
$('#js-categories-container').on('changed.jstree', () => this._handleSelection());//this wont work
return this;
}
_setTree() {
$('#js-categories-container').jstree(jsonTreeGenerator.generate(this._data.categories));
$('#js-categories-container').on('changed.jstree', () => this._handleSelection()); //this will work
return this;
}
_handleSelection() {
alert(1);
}
}

Since you are adding the js-categories-container element dynamically, I believe it is not there yet at the time when you bind an event to it. So you have to delegate event handling, e.g. same way as you do for the js-image-container element. Check demo - Fiddle Demo:
$(document).on('click', '#js-image-container',
() => { $('#js-image-uploader').trigger('click'); }
);
$(document).on("click", '#js-categories-container',
() => {
// get the node if you need it
var node = $('#js-categories-container').jstree().get_node(event.target);
// do something
this._handleSelection();
}
);

Related

In videojs, I can add a Text Track event handler, but I can't remove it

I added a handler for the 'cuechange' event to a Text Track" This works fine. But I can not find a way to remove this handler. I tried each of instructions below to remove the handler, but it still gets called.
onHiliteSpeech() {
const textTrack = this.videojsComponent.getTextTrack();
const handleCueChange = () => {
...
console.log(in event handler);
}
};
if (this.bevents) {
textTrack.addEventListener('cuechange', handleCueChange);
} else {
// none of the below instructions remove the handler.
textTrack.removeEventListener('cuechange', handleCueChange);
// textTrack.removeAllListeners();
// textTrack.removeAllListeners('cuechange');
// textTrack.eventListeners = null;
}
}
In my videojsComponent:
getTextTrack(): TextTrack {
return this.player.textTracks()[0];
}
After some trial and error, I found the problem. The function "handleCueChange" should not be a nested function within onHiliteSpeech.
I moved handleCueChange outside of onHiliteSpeech. (This also involved some work to allow handleCueChange to access some OnHiliteSpeech properties.) The new working code became:
const handleCueChange = () => {
...
console.log(in event handler);
}
};
onHiliteSpeech() {
textTrack.addEventListener('cuechange', this.handleCueChange);
...
textTrack.removeEventListener('cuechange', this.handleCueChange);
}

Check if an element has focus - Vue.js directive

I am trying to check if an element has focus, in my case Input, and add a class to another element.
This is what I am trying, but I am not sure why hasFocus() is not working.
onFocus () {
let isFocused = document.el.querySelector('a-input')
let focusedEl = document.el.querySelector('a-button')
if(isFocused.hasFocus()) {
focusedEl.classList.add('testClass')
}
}
I am trying to do this in a Vue.js custom directive.
There is a suggestion in the Vue.js forum to use the focusin event:
created() {
document.addEventListener('focusin', this.focusChanged)
},
beforeDestroy() {
document.removeEventListener('focusin', this.focusChanged)
},
methods: {
focusChanged (event) {
const el = event.target
// do something with the element.
}
}
Since I mentioned that I need to make it as a custom directive:
This is how I fixed it.
class someClassName {
constructor (el, config = {}) {
this.el = el
this.input = el.querySelector('.a-input')
this.button = el.querySelector('.a-button')
this.onInputFocus = this.onInputFocus.bind(this)
this.attachEvents()
}
onInputFocus () {
this.button.classList.add('testclass')
}
attachEvents () {
this.input.addEventListener('focus', this.onInputFocus)
}
}

Module overwrite previous attached window mouseup event

I am currently working on a javascript module which open and close boxes, tooltip or similar, the function works great the only problem is when I call it twice on a page where the 'boxes' classes are different the window mouseup event will be overwritten and only one of the two module instances of boxes can now be closed after opening them.
var boxRevealer = (function () {
var buttons;
var boxes;
var element;
var drp_active = false;
var boxConstruct = function (btns, bxs) {
buttons = document.querySelectorAll(btns);
boxes = document.querySelectorAll(bxs);
boxEvents();
};
var boxEvents = function () {
buttons.forEach(function (e) {
e.addEventListener("click", function (ee) {
element = document.getElementById(e.getAttribute("data-drp"));
element.classList.toggle("displayn");
drp_active = true;
});
});
window.addEventListener("mouseup", function (e) {
if (drp_active === true) {
if (!e.target.classList.contains("filt_holy")) {
boxes.forEach(function (e) {
console.log("ELEMENT");
console.log(e);
e.classList.add("displayn");
});
}
}
}, false);
};
return {
boxConstruct: boxConstruct,
boxEvents: boxEvents
};
})();
Here is how i call the module
window.addEventListener("load", function(e){
boxRevealer.boxConstruct(".head_drp_btn", ".head_drp");
boxRevealer.boxConstruct(".mkt_drp_btn", ".mkt_drp");
});
So my question is, should I always name the boxes the same, or is there a work around?
Just remove the event before adding it, I think the same event is getting called twice.
So updated code will be as follows:
// Attach an event handler to <div>
e.addEventListener("mousemove", myFunction);
// Remove the event handler from <div>
e.removeEventListener("mousemove", myFunction);
And remove the window event as well before adding it.

How to disable all ng-click and ng-submit event

is there any way, how can I globally (in service) disable and enable all ng-click and ng-submit events?
For example when user is offline I want to disable all actions till he gets connection back..
I tried to bind all elements with an onClick event which will call stopImmediatePropagation but it didn't work..
$('*[ng-click]').click(function( event ) {
event.stopImmediatePropagation();
});
Also this question is a little bit different from this one:
Disable ng-click on certain conditions of application for all types of element
I'd like to disable/enable all events in APP globally from service, I'm not able to modify all ng-* calls on all elements in the APP..
Try including a return false too:
$('*[ng-click]').click(function( event ) {
event.stopImmediatePropagation();
return false;
});
Snippet
The below snippet demonstrates that multiple event handlers attached to a single <a> works too.
$(function () {
$("a").click(function () {
alert("Hello!");
return false;
});
$("a").click(function () {
alert("Bye!");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Click Me
So finally I end up with temporarily disabling all events on the page using jquery..
I got inspired from this plugin http://ignitersworld.com/lab/eventPause.html which for some reason did not work (without any error)
So I took main parts and put it to this class which is working now using jquery v2.1.1:
var EventManager = function() {
var self = this;
var nullFun=function(){};
var getIndex = function(array,value){
for(var i=0; i< array.length; i++){
if(array[i]==value){
return i;
}
}
return -1;
};
this.pauseEvent = function(elm,eventAry){
var events = $._data(elm, "events");
if (events) {
$.each(events, function(type, definition) {
if((getIndex(eventAry,type)!=-1)||(eventAry=='')){
$.each(definition, function(index, event) {
if (event.handler.toString() != nullFun.toString()){
if(!$._iwEventPause) $._iwEventPause = {};
$._iwEventPause["iw-event" + event.guid] = event.handler;
event.handler = nullFun;
}
})
}
})
}
};
this.activeEvent = function(elm,eventAry){
var events = $._data(elm, "events");
if (events) {
$.each(events, function(type, definition) {
if((getIndex(eventAry,type)!=-1)||(eventAry=='')){
$.each(definition, function(index, event) {
if (event.handler.toString() == nullFun.toString()){
event.handler = $._iwEventPause["iw-event" + event.guid];
}
})
}
})
}
};
this.disableAll = function(el) {
el = el || $('*');
el.each(function() {
self.pauseEvent($(this)[0], '');
});
self.pauseEvent($(window)[0], '');
};
this.enableAll = function(el) {
el = el || $('*');
el.each(function() {
self.activeEvent($(this)[0], '');
});
self.activeEvent($(window)[0], '');
};
return this;
};
var eManager = new EventManager();
eManager.disableAll();
eManager.enableAll();
This will go through window object and all elements on the page, move their event handlers away to _iwEventPause object and replace handlers with dummy function.. When enabling, it will move handlers back so they get normally called..
This solution does not handle event handlers added after disabling..

jQuery toggle triggers effect instead of handler [duplicate]

$('.slideArrow').toggle(function (event) {
//some code
}, function (event) {
//some code
});
This works fine for content which are loaded on page-load.But the same function does not work for content loaded with ajax.It just does not intercept the click.
What should I do?
In an other scenario,i faced a same problem(not for toggle,for click) and sorted it this way.I dont know what to do for toggle?
$('.common-parent').on('click','.target-of-click',function(){
//some code
})
The flag method :
var flag = false;
$(document).on('click', '.slideArrow', function(event) {
if (flag) {
// do one thing
}else{
// do another thing
}
flag = !flag;
});
the data method
$(document).on('click', '.slideArrow', function(event) {
if ( $(this).data('flag') ) {
// do one thing
}else{
// do another thing
}
$(this).data('flag', !$(this).data('flag'));
});

Categories