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

Why does the select2-removing event not trigger in select2 with allowClear?

I want to hook an event in my select2 once it gets cleared. The select2 was initalized with allowClear: true. Yet the event
$select.on('select2-removed', function(event) {
console.log(event);
});
does not trigger when resetting the select2 with the clear button.

select2 v4.0.3
$('#smartsearch').on('select2:unselecting', function (e) {
alert('You clicked on X');
});
For all the select2 Options & Events

For me the only thing that worked is the 'select2:unselect' event... (In non-multiple select box)

According to the select2 source code, the clear method use the event select2-clearing instead of select2-removing. So you should listen to this event too.
select2-clearing and select2-removing are triggered before the removal. select2-removed is triggered after.
Keep in mind that clear does not always trigger the select2-removed event. It look like this event is triggered only if an element is actually removed from the input.

I got it working with the 'select2-removed'-event instead of 'select2-removing' when using the clear button.
As to why it does not trigger still eludes me.

I wanted to get data about the element just got removed on removed event. Following code worked for me;
$('#selector').on('select2:unselect', function (e) {
var data = e.params.data;
});

If you are working with 4 or above version then use
$('#id').on('select2:unselecting', function (e) {
alert('You clicked on X');
});
Below 4 version
$('#id').on('select2-removing', function (e) {
alert('You clicked on X');
});
Make sure for 4 or above version it is select2:unselecting colon(:)
Less than 4 version it is select2-removing -(hyphen)

Fire an event only when an focused element looses focus

This is my Fiddle JsFiddle
$(function() {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').removeAttr("readonly").focus();
});
$('.form-control:focus').blur(function() {
$(this).addAttr("readonly");
});
});
What I am trying to do?
I am trying to create a dynamically editable form.It should have
When someone click on edit icon, the corresponding Input field should get focussed and become editable. (I completed this part).
Next i want is when an element is in focus state and it looses focus then i want to add readonly attribute again to that element. This part in not working. can somebody explain me why. and give a solution for it
EDIT:
In the later part i was trying alert("some msg") to check whether the event is getting fired or not. while posting i just replaced it with addAttr. it was a typo

You could use instead:
--DEMO--
$(function () {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').prop("readonly", false).focus().one('blur', function () {
$(this).prop('readonly', true);
});
});
});

There is no addAttr() function. The setter for attr looks like this:
$('.form-control').blur(function() {
$(this).attr("readonly", true);
});
Also, the :focus psuedo selector here is redundant, as to fire the blur event the element has to have focus in the first place.

jQuery .focus() after .show()

I have the following code that hides one text box and shows another. When the next one shows, I need the cursor to be on it, so I call .focus() on it. However, even though I have the call to .focus() as the second parameter, it still isn't focusing. Any ideas?
$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show(0, function() {
$(this).focus();
});
});
});

Sorry for the trouble everybody. It turns out that after messing with it some more, my DOM traversal wasn't quite right. I removed the divs I had around the input boxes and it works like a charm. Thank you.

That behavoiur occurs, becaus $(this) refers to the just hidden input field change your code like:
$(this).next().show(0, function() {
$(this).next().focus();
});

$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show().focus();
});
});
EDIT:
check this fiddle

On change event not fired with dynamically loaded data

I am dynamically loading data in the input type text and triggering alert if the value of the text box is changed. But my code does not seem to work. Please provide suggestions.
visit this page for code: http://jsfiddle.net/NbGBj/103/
I want the alert to be shown when the page is loaded

You should remove your " around document
$("document").ready(function(){
...
should be
$(document).ready(function(){
...
or use the shortcut
$(function(){
...
From the official documentation:
All three of the following syntaxes are equivalent:
- $(document).ready(handler)
- $().ready(handler) (this is not recommended)
- $(handler)
http://api.jquery.com/ready/
But I guess what you want is the keyup event
$(function () {
$("#upload").val("sample");
$("#upload").keyup(function () {
alert($(this).val());
});
});
And for better readability, you can use chaining
$(function () {
$("#upload").val("sample").keyup(function () {
alert($(this).val());
});
});
http://jsfiddle.net/BXNkq/

You can just fire the change function directly after you set the value in the text box like this:
....
$("#upload").val("sample");
$("#upload").change();
....