Develop Reference

jQuery "Chosen" on-filter event?

I want to run a function whenever the search input box is changed in chosen (jquery dropdown plugin).
But unable to find such event neither in their documentation nor on the net. Does anyone have experienced or have idea how to call some code whenever search is done in Chosen?
I tried placing the jquery .on('change' event on the textbox but it didn't work.
I wrote
$(".chosen-search input").on("change", function(e) {
//console.log($(this));
});

I had to "double" wrap the on to get the input event to fire on the Chosen text field search box:
$('#my-chosen-input').on('chosen:showing_dropdown', function() {
$('.chosen-search input').on('input', function() {
// The text has changed, do something...
});
});

$(".chosen-search").change(function(){
console.log("changinn");
});
This should work

Chosen js filters dropdown list onkeyup event. This snippet would work better:
$(document).on('keyup', '.chosen-search input', function() {
console.log('filtered');
})

BootstrapValidator with CKEditor

I'm trying to do the validation of "CKEditor" using "BootstrapValidator".
Something like in the example here: LINK
Unfortunately, no way I can make to make it work. I tried to update invisible textarea content but it also did not help.
My attempts:
.find('[name="bio"]')
.ckeditor()
.editor
// To use the 'change' event, use CKEditor 4.2 or later
.on('change', function () {
// Revalidate the bio field
$('#profileForm').bootstrapValidator('revalidateField', 'bio');
});
JsFiddle

Up date your CKEditor first
add it
<script src="//cdn.ckeditor.com/4.4.3/basic/ckeditor.js"></script>
<script src="//cdn.ckeditor.com/4.4.3/basic/adapters/jquery.js"></script>
then check it. it may usefull

ckeditor on focus not working

Just trying to do a simple on focus command with ckeditor and jquery.
var foo = // what can i do here to signal ckeditor?
$(foo).focus(function(){
$(".class1").hide();
$(".class2").show();
});
Maybe this is really simple and I'm just overlooking it but any advice or links are greatly appreciated.
Have tried:
CKEditor on focus remove default value
How to listen to basic events in CKEditor?
http://docs.ckeditor.com/#!/api/CKEDITOR.focusManager-method-constructor
http://www.mytechlogy.com/professionals/questions/forum-details/158/how-to-make-focus-in-ckeditor-using-js/?ref=related_posts#.U2EgUv3z3eI
http://ckeditor.com/forums/Support/jquery-click-event-not-working-textarea-ckeditor

Basic idea with CKEditor's events
CKEDITOR.on('instanceCreated', function (event) {
event.editor.on("focus", function () { //nothing to do with jQuery, this is CKEDITOR's on
$(".class1").hide();
$(".class2").show();
}
);
or
CKEDITOR.instances["editorID"].on("focus", function(){ //CKEDITOR's ON
$(".class1").hide();
$(".class2").show();
} );

onkeypress textbox issue

I have this:
<input type="text" ID="txtMy" name="txtMy" onkeypress="initialize();"/>
And in my .js file I have:
initialize()
{
var x = $("#txtMy").val();
}
But, if I have '2' in my textbox, and then I enter 4, the value of x is still 2. How to resolve this?

Use keyup
Here is how you do that in the unobtrusive way.
HTML
<input type="text" id="txtMy" />
Script
$(function(){
$("#txtMy").keyup(function (event) {
alert($(this).val())
});
});
Working Sample : http://jsfiddle.net/VmELF/4/
If you want to bind the functionality to a text box which is being injected to the DOM after the dom load( possible by an Ajax call etc...), you may use jQuery on
$(function(){
$("body").on("keyup","#txtSearchKey",function (event) {
alert($(this).val())
});
});

Your spelling of initialize in the onkeypress does not match the declaration (inititalize).

keydown and keypress events both execute BEFORE the entered key has actually appeared in the text box. If you want to get the new value of the input after the key has appeared, use the keyup event instead.
<input type="text" ID="txtMy" name="txtMy" onkeyup="initialize();"/>
initialize()
{
var x = $("#txtMy").val();
}
You should consider binding your event handlers in javascript using .on(), since you're using the library anyways. Keeping your logic (javascript) seperated from your view (html) is a good habit to get in to.

instead of markup event handler you can use jquery:
var x;
$("#txtMy").on("keyup", function(){
x = $(this).val();
alert(x);
})

A few things:
Use the keyup event. keypress is firing before the character is recorded.
Your initialize() function is misspelled in your HTML snippet.
See the working jsfiddle at http://jsfiddle.net/8XTLW/1/

add code for event listener for keypress in ckeditor

I need to add an event listener for keypress after the CKEditor is loaded.
The code is something like:
CKEDITOR.instances.editor1.document.on('key', function(event) {
/* instructions */
});
Any idea where can I add the code for that? In which file or in what way?

Code to archive it is something like this:
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('contentDom', function() {
e.editor.document.on('keyup', function(event) {
// keyup event in ckeditor
}
);
});
});
Edit - 2014 - Since this answer is still getting some upvotes, i felt it would be fair to point out, that it was meant for CKEditor in version 3.x. With the version 4.x there is a change event, which will trigger not only on key events but also after pasting, undo, redo etc.
In code its something like this:
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('change', function (event) {
// change event in CKEditor 4.x
});
});

Do you need to track changes?
I was originally using the solution above, but I ended up replacing it with the OnChange CKEditor plugin. This is useful in some special cases - for example, if you add a link using the toolbar, keypress won't register anything.
Here's a code example, updated to use instanceCreated (install OnChange first):
CKEDITOR.on('instanceCreated', function(e) {
if (e.editor.name === editorId) { //editorId is the id of the textarea
e.editor.on('change', function(evt) {
//Text change code
});
}
});
Update: According to the answer above, CKEditor now has a built-in change event, so you don't have to install the plugin to use this solution anymore. You can still use the second line of code to apply the change to the instance of CKEditor you want to edit.

If the keydown logic makes sense for a given plugin, you can include it in the plugin's definition:
CKEDITOR.plugins.add('customPlugin', {
// definition keys...
init: function( editor ) {
// Plugin logic
...
// Register a keydown event handler -- http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-key
editor.on('key', function(event) {
console.log('CKEDITOR keydown event from customPlugin'); // successfully captures keydown when registered from plugin
}
});

I've tested some of the solutions proposed here and I got my anwser when I found this link: http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html
The following code worked like a charm:
editor.on('contentDom', function()
{
editor.document.on('keydown', function( event )
{
if ( !event.data.$.ctrlKey && !event.data.$.metaKey )
somethingChanged();
});
});

CKEDITOR.instances.editor1.on('change', function () { //Do something here.});
This code registers any change event including copy-paste.

You add that code in your page, or in a .js file included in your page. There is no mystery about that code.