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');
})
Related
So I'm developing a script that makes use of a dropdown (class typeahead_list) and a textbox (class et_email) in Bootstrap. Whenever the text box loses focus, I need the dropdown to close. But if someone clicks on one of the list items in the dropdown (class et_li), the contents of that list item must populate the text box before closing the dropdown.
Note: All of the lis are dynamically generated. I don't know if that makes a difference or not.
This code puts the li contents into the textbox, but does not close the dropdown.
$( ".et_email" ).focusout(function() {
$(".typeahead_list").on("click", "li", function() {
$(".et_email").val($(this).text());});
//$(".typeahead_list").hide();
});
This code closes the dropdown, but does not put the contents of the li into the text box.
$( ".et_email" ).focusout(function() {
$(".typeahead_list").on("click", "li", function() {
$(".et_email").val($(this).text());});
$(".typeahead_list").hide();
});
Any idea on how to fix this? Where is the conflict coming from?
UPDATE:
Alex Cassady suggested the following fix:
$(".typeahead_list").on("click", "li", function() {
$(".et_email").val($(this).text()); // copy value
$(".typeahead_list").hide(); // then hide
});
Thank you for your help. I've looked into a solution similar to this before. However, I was having an issue because I need the dropdown to close whenever the email box loses focus for any reason at all... while still responding to the li click. With this example, the dropdown only closes when someone clicks on the li.
But if I try to add another handler for $( ".et_email" ).focusout() within the $(document).ready(), it completely invalidates the effects of this function. It's like $( ".et_email" ).focusout() and $(".typeahead_list").on("click", "li", function(){}) can't live in the same universe together. There is some kind of conflict.
Basically, the rule I need to implement is: Always close the dropdown when et_email loses focus for any reason... but if focus is lost because of an li click with the typeahead_list div, then populate the text box with the contents of that li before closing the dropdown.
You're binding a click listener to an element which will be hidden right away and so can not be clicked! The reason it works if you comment the hide() line is because it can be clicked.
If you just want the text before hiding:
$( ".et_email" ).focusout(function() {
$(".et_email").val($(".typeahead_list").text());
$(".typeahead_list").hide();
});
EDIT:
Alright I think I have a better understanding of what you're trying to do. This is not a clean solution, but will do the job.
Have a global variable 'focusLost' or anything, It'll be set to true every time .et_email loses focus and set to false in a second. In .typeahead_list click listener we check whether focusLost is true.
var focusLost = false;
$('.typeahead_list').on('click', function () {
if (focusLost) {
$('.et_email').val(($(this).text()));
$(this).hide();
}
});
$('.et_email').focusout(function () {
focusLost = true;
setTimeout(function () {
$('.typeahead_list').hide();
focusLost = false;
}, 1000);
});
jsfiddle DEMO
As A. Wolff said, don't nest handlers. The focusout event is binded to all .et_email, but the click event isn't binded to the .typeahead_list until the focusout event is triggered.
The .typeahead_list is being hidden before the value can be changed. Focusout is the same as clicking outside of .et_email and it's being called first.
Removing the focusout event handler completely should solve the problem.
$(".typeahead_list").on("click", "li", function() {
$(".et_email").val($(this).text()); // copy value
$(".typeahead_list").hide(); // then hide
});
Edit: You could also try copying the value in a callback function for $.hide()
$(".typeahead_list").on("click", "li", function() {
$(".typeahead_list").hide( function() {
$(".et_email").val($(this).text()); // copy value
}); // then hide
});
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)
I am unable to trigger the change of the text in the current scenario.
If i click on the button i am changing the content of the text. So how can i trigger the change of the text which is caused by external event.
For example in a click of a button I can able to fill any text in the textbox, able to paste texts and using mouse and keyboard. In these all scenarios and scenarios like these also I want the event to be fired.
I have already tried the following.
$('#text_id').on('change', function () {
alert('This is not trigged when i changed the text');
});
The alert should come when the text is changed. There might be many possible sources to change the text.
This is the Fiddle i created.
Thanks in advance.
This is my updated fiddle
Updated Fiddle - http://jsfiddle.net/upa2A/1/
$(document).ready(function () {
$(document).on('click', "#button_id", function () {
$('#text_id').val('TExt changed')
});
$(document).on('change', "#text_id", function () {
alert('This is not trigged when i changed the text');
});
});
Issues in original Fiddle -
Code has to be inside $(document).ready()
Missing () after function
Incorrect use of $.on (Read more about it on http://api.jquery.com/on/)
Edit based on comment from asked -
Updated Fiddle - http://jsfiddle.net/upa2A/4/
$(document).ready(function () {
$(document).on('click', "#button_id", function () {
$('#text_id').val('TExt changed').change();
});
$(document).on('change', "#text_id", function () {
alert('This is not trigged when i changed the text');
});
});
More edit based on comments thread -
From http://api.jquery.com/change "but for the other element types the event is deferred until the element loses focus."
Since, when changing via button click, text box wasn't focussed, the trigger does not happen automatically.
I saw your code in jsfiddle. you missed in some brackets and semicolon . otherwise ur code write . pls check jquery library code.
$('#button_id').on('click',function()
{
$('#text_id').val('TExt changed');
}
);
$('#text_id').on('change',function() { alert('This is not trigged when i changed the text');
} );
Try the below code. But for this you should use jQuery. It'll raise the event whenever the text changed.
$('#text_id').on('input propertychange paste', function() {
alert('Text Changed');
});
the working fiddle is here
This event surely raised on text change. If it is not useful for you surely someone else will be happy for this.
var txtVal = '';
setInterval(function() {
if ($("#text_id").val() != txtVal) {
txtVal = $("#text_id").val();
alert("Text Changed");
}
}, 10);
working fiddle is here
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.
I am working on a project, what includes a smartsearch engine.
I'd like to write a method what makes the client write inside the smartsearch, even when it's not focused. F.e. browsing the site, the client hits down a key, and the focus jumps to the smartsearch.
That's working fine with this simple code:
$(document).ready(function()
{
$("*").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But, yeah as You can see, it unfocuses other inputs too, and that's not the way I want it.
I have tried several 'possible-solutions', like :not() and even .not() method like:
$(document).ready(function()
{
$("*").not("input").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But it still unfocuses fields with "input" tagname too. What should I do to force jQuery not to select input fields for this event listener?
Thanks, Steven.
$(document).keydown(function() {
if (!$('input').filter(':focus').length) {
$('#b').focus();
}
});
Working fiddle
$(document).ready(function () {
$(document).keydown(function (e) {
$("input.ss-24#b").focus();
});
});
Does this work?
http://jsfiddle.net/Xbbu8/