We Keep Coding

Datatables select row programmatically without triggering select event

In Datatable's Select plugin, there is a way to programmatically select a row:
https://datatables.net/reference/api/row().select()
But this will also trigger the row's select event, which is not ideal in my context as it will get into an infinite loop...
Is there a way of doing this without having to use some control variable?
The bit in their API for the select function is as follows :
apiRegisterPlural( 'rows().select()', 'row().select()', function ( select ) {
var api = this;
if ( select === false ) {
return this.deselect();
}
this.iterator( 'row', function ( ctx, idx ) {
clear( ctx );
ctx.aoData[ idx ]._select_selected = true;
$( ctx.aoData[ idx ].nTr ).addClass( ctx._select.className );
} );
this.iterator( 'table', function ( ctx, i ) {
eventTrigger( api, 'select', [ 'row', api[i] ], true );
} );
return this;
} );
It seems I just need to figure out the ctx.aoData[ idx ]._select_selected = true; part, is ctx the row object? I'm clueless.

I know this question is very old, but for those coming here later on might like an answer.
Datatables has a select event and a user-select event.
Just use the user-select event where applicable and leave the select event for all other purposes.
https://datatables.net/reference/event/user-select
For example,
var table = $('#example').DataTable( {
select: true
} );
table
.on( 'user-select', function ( e, dt, type, cell, originalEvent ) {
if ( originalEvent.target.nodeName.toLowerCase() === 'img' ) {
e.preventDefault();
}
} );
Update : Just to add an additional choice since the user-select event does fire even on a deselect. One way to avoid some issues I think many people have is when the table is initialized they programmatically select items. You can avoid this trigger by simply enabling your select and deselect events only after the table has been initialized.
Datatables has an initComplete event. So do it like so. Where table is a variable to your datatable reference.
initComplete: function(settings, json) {
table.on('select', function( e, dt, type, indexes ) {
});
}

CKEDITOR : How do set `contentdom` after every SetData

I am creating a CKEditor plugin and I face some issues on this.
Model of My Plugin:
CKEDITOR.plugins.add("myplugin", {
//for lang,require,icon
init:function(a){
editor.on('contentDom', function () {
editor.document.on('key', function (evt) {
console.log("Key Pressed");
});
});
}
});
This is Working Fine.But,my problem is setData.
I am setting data when the user is clicking a file.
After setData the key event is not Working.
Is there any way to attach the listener to document after every setData() within plugin file?
And what are the other type of methods which are used in CKEditor like init ?
(OR)
Is there any way to setData() without affecting contentdom,key events?

Please add the listener to the editor and not to the document. That way it wil not get removed when document is removed:
editor.on( 'instanceReady', function( e ) {
editor.on( 'key', function( e ) {
console.log('test');
});
});
Please see: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-key

Finally, I found the Answer.
Refer the below Question
CKEDITOR.setData prevents attaching of events with .on function
And goes to the Document in CKEditor Docs Page.
#contentDomUnload
Finally My Code Like this,
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'keyup', function (evt) {
console.log('for key events');
});
editable.attachListener(editable, 'mousedown', function (evt) {
console.log('for click events');
});
});
And It worked very well.

IntroJS callback function upon skip or done?

I'm using introjs to build a tour of my application. I've searched in quite a few places online and through the documentation but can't seem to find anywhere a method of how to run a function upon skipping or clicking done on the tour. I'm trying to make it so a cookie is stored and the tour isn't run again until a user requests it or a new user comes to the site. Any help would be great, thanks!
$(function(){
var introguide = introJs();
introguide.setOptions({
showProgress: true,
steps: [
{ hidden }
]
});
introguide.start();
});

This code allows to store the tour info
var introguide = introJs();
window.addEventListener('load', function () {
var doneTour = localStorage.getItem('MyTour') === 'Completed';
if (doneTour) {
return;
}
else {
introguide.start()
introguide.oncomplete(function () {
localStorage.setItem('MyTour', 'Completed');
});
introguide.onexit(function () {
localStorage.setItem('MyTour', 'Completed');
});
}
});

Yes, there is a way but with some caveats.
First, after intro.js is loaded you will have a global called introJs with a property fn (standard jquery plug-in approach).
By setting a function using the oncomplete() function under introJS.fn, you can perform some actions when the user hits the 'Done' button.
Here's an example that just displays a console message:
introJs.fn.oncomplete(function() { console.log("Finished"); });
This works as expected. You can put this in a script anytime after the intro.js library is included.
The 'skip' button functionality, however, will only call the 'oncomplete' handler if you are on the last step. The author of the code views that as not complete and so doesn't run that code as you can see by this extract from the code:
skipTooltipButton.onclick = function() {
if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
self._introCompleteCallback.call(self);
}
_exitIntro.call(self, self._targetElement);
};
This basically says it must be at the last step for this to consider calling the complete callback.
Of course, you could fork the code and remove the restriction. I would suggest if you are going to do that, create a _introSkipCallback in a fashion similar to _introlCompleteCallback and invoke that unless on last step where you might invoke both functions if present.
Hope this helps.

Use oncomplete for functions after 'Done' is clicked
Use onexit for functions after 'Skip' is clicked
Bonus function: onchange will log each step, this can be used to call functions on a particular step
document.getElementById('startButton').onclick = function() {
// log each step
introJs().onchange(function(targetElement) {
console.log(this._currentStep)
if (this._currentStep === 3){
stepThreeFunc()
}
}).start()
// clicking 'Done'
.oncomplete(function(){
someFunc()
})
// clicking 'Skip'
.onexit(function(){
someOtherFunc()
});
};

I've noticed that onexit will be called when you click the done button (which is skip until the last step). onexit does not appear to bind this to the introjs object, so I was able to solve the issue of having onexit called when the walkthrough was completed like this:
// during setup
introJs.oncomplete(handleOnComplete);
introJs.onexit(() => handleOnExit(introJs));
function handleOnComplete() {
console.log(this._currentStep); // this is bound to the introJs object
}
function handleOnExit(introJs) {
const currentStep = introJs._currentStep;
if (currentStep < introJs._options.steps.length) {
doSomethingOnSkip();
}
};

I was going to add a comment, but my rep is too low. I didn't want to answer because I haven't actually tested this, but in version 2.5.0 (maybe previous versions too), there is the onexit function, which I believe is supposed to handle interrupts as well as clicking done at the end. Did you try that?

if ($(".introjs-skipbutton").is(":visible")) {
$( document ).on('click', '.introjs-skipbutton', function(event) {
event.stopPropagation();
event.stopImmediatePropagation();
self.exitTourguide();
});
}

I am using introJS tool in my application to give tour guide information of my application.
I used some functions for handling it dynamically. Here stepsData sending in an array format.
var intro = introJs();
intro.setOptions( {
'nextLabel': 'Next >',
'prevLabel': '< Back',
'tooltipPosition': 'right',
steps: this.stepsData,
showBullets: false,
showButtons: true,
exitOnOverlayClick: false,
keyboardNavigation: true,
} );
hope it will help for handling skip button action.
var self = this; intro.start().onbeforechange( function() { /* skip action*/
if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) {
$( document ).on( 'click', '.introjs-skipbutton', function( event ) {
self.exitTourguide();
});
}
});
skip and done action handling.
/Done click action/
intro.oncomplete( function(){ if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { $( document ).on( 'click', '.introjs-skipbutton', function( event ) { event.stopPropagation(); event.stopImmediatePropagation(); self.exitTourguide(); }); } });
/* clicking 'Skip' action */ intro.onexit(function(){ if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { $( document ).on( 'click', '.introjs-skipbutton', function( event ) { event.stopPropagation(); event.stopImmediatePropagation(); self.exitTourguide(); }); } });

Trying to make an event depend on another event and data is passed along using jquery custom events

for this problem I want to pass along data depending if a checkbox is checked. the data comes from the .on() second paramater.
I want to do something like this. I know it is really messed up. Im not sure how the data work and when to use .trigger()
$(document).on('justData', function(e, data){
console.log(data);
})
$('.justData').on('click', function(){
var insert
dataobj ={
"mike" : 'mikevalue',
"john" : 'johnValue'
}
$("#checkThis").on('change', function(e, data){
if(this.checked){
insert = dataobj.mike
}else{
insert = dataobj.john
}
})
$(this).trigger('justData', insert)
})
I wanted to insert "mikevalue" if the box is checked and "johnvalue" if unchecked.
I'm learning how to use mediators. I think that's when you do $emitter = $({}) so I want to separate event. when the user clicks on the $(.justData) i would have $({}).trigger("Ischecked") something like that I'm confused. If some one can show me how to pass along dynamic data to different events using $emitter .trigger() .on() that would be great.

You're on the right track. This is the simple and clear example given from the jQuery API Docs for handling custom events:
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
Also cleaned up your code a little bit:
$('body').on('justData', function(e, data){
console.log(data);
});
$('.justData').on('click', function(e){
var insert = "",
$checkbox = $('#checkThis'),
data = {
"mike" : 'mikevalue',
"john" : 'johnValue'
};
if($checkbox.prop('checked')){
insert = data.mike;
} else {
insert = data.john;
}
$('body').trigger('justData', insert);
});

jquery addClass not executed correctly with "on" (ex live) jquery method and datatables Initialization

I use the datatables plugin with jquery.
I don't understand why the jquery addClass code is executed after the destroy, reinizialitation and sorting of datatables ...
$('#added_jobs').on( 'click', '.rem_added', function () {
$("#gif_loader").addClass("overlay");
oTabJobs.fnDestroy();
loadTabJobs();
oTabJobs.fnSort( [ [3,'asc'] ] );
$("#gif_loader").removeClass("overlay");
});

Most likely it is the fact that the sort method is locking up page not allowing the DOM to be updated until after the loop has run.
You need to add a slight delay for the DOM to fully update before calling your destroy/sort code.
$('#added_jobs').on( 'click', '.rem_added', function () {
var loaderImg = $("#gif_loader");
loaderImg.addClass("overlay");
window.setTimeout( function () {
oTabJobs.fnDestroy();
loadTabJobs();
oTabJobs.fnSort( [ [3,'asc'] ] );
loaderImg.removeClass("overlay");
}, 10);
});