We Keep Coding

Jquery click event for drop down list items

I have a drop down list in an MVC application. When an item in the drop down list is selected (including the same one), I want to trigger a function. However, the first item in the list can't trigger the function and it should be disabled. I have some code below which works initially but after clicking a valid option and then clicking --Select-- again, it still fires the code. How do I fix this?
MVC Control
#Html.DropDownList("ddlCountries", (IEnumerable<SelectListItem>)ViewBag.Countries, "--Select--", new { #class = "form-control" })
jQuery to trigger the DDL click event
$('#ddlCountries option:not(:first)').click(function () {
runCode()
});
jQuery to disable the first option
jQuery('#ddlCountries option:contains("--Select--")').attr('disabled', 'disabled');

Get the index of the selected option and check to see if it's greater than 0 on event fire. Indexes are 0 based.
$('#ddlcountries').on('change', function() {
var index = $(this).find('option:selected').index();
if (index > 0) {
alert('yay');
runCode();
} else {
alert('nay');
return;
}
})

I deleted the code to disable the first option because I couldn't get it to stay disabled after the first change. I modified the jQuery to trigger the event to:
jQuery('#ddlCountries').find('option:gt(0)').click(function () {
runCode()
});
Then I added styling to the --Select-- box to make it gray. You can still click on it but it won't do anything. Not exactly what I was trying to do but close enough

How do I add this counter API to my clickHandler so it can count each click with its corresponding value?

In my html I have a form with 4 radio buttons. Each radio button represents an option the user can submit.
I have set up an event listener that listens for a radio button change event:
[].forEach.call(document.querySelectorAll("input[type='radio']"),function(radio)
{
radio.addEventListener("change", handleRadioClick);
});
And this is how my click handler looks like:
function handleRadioClick() //this code happens when user selects this radio button
{
var label = document.querySelector("[for='"+this.id+"']");
//execute more stuff here
}
I now need to add a Doubleclick counter API
Enabler.counter('Option 1 was clicked'); //i.e.
so we can track what option has been clicked.
How would I go about accomplishing this? Thanks so much for any tips!
Note: Plain JS suggestions only please. Thanks!

How to check if dropdown is open in Select2?

I'm using select2 and in my site. I need to know at some point if the dropdown is open or closed. I've studied the documentation but I don't see how this can be done. For example, something like this would be nice:
if ($('select').select2('isOpen') === true) { ... }
Any suggestions?

In version 4.0 of select2 you can listen to select2:opening, select2:open, select2:closing and select2:close events on select element, for example:
$('select').on('select2:open', function (e) {
// select2 is opened, handle event
});

Select2 4.0 has an isOpen method. If #mySelect is your HTML select element then:
$('#mySelect').data('select2').isOpen()
...will return true or false depending on the state of Select2.

By doing some code inspection, it looks like select2-dropdown-open is the class that it adds. But there is an event select2-open in the documentation that fires when the dropdown is open. You can use that to set a variable, or perform an action (also select2-close).
You can do something like this:
$("#e11").on("select2-open", function() {
$(this).data("open", true);
});
$("#e11").on("select2-close", function() {
$(this).data("open", false);
});
if ($("#e11").data("open")) {
//do something
}
2018 Edit
It appears that the names of the events have been updated since 2014. See user1636505's answer below.

As of Select2 4.0.6, this has been updated to the following
$("#foo").select2("isOpen")
This will return true/false
Hope this helps!

change is fired whenever an option is selected or removed.
select2:open is fired whenever the dropdown is opened. select2:opening is fired before this and can be prevented.
select2:close is fired whenever the dropdown is closed. select2:closing is fired before this and can be prevented.
select2:select is fired whenever a result is selected. select2:selecting is fired before this and can be prevented.
select2:unselect is fired whenever a result is unselected. select2:unselecting is fired before this and can be prevented.

It's better to do this:
var select2 = $('#selectorname').data('select2');
if (select2.opened()) {
//do it
} else {
//dont do it
}

$('select').select2('isFocused');
https://github.com/select2/select2/issues/39

It works perfectly.
$(".select2-container").is(":visible")

Dynamically added input to form doesn't validate after first validation

I have a form where I add some inputs dinamically.
Every time the user select another "fornecedor" from addMaterialFornecedor select I add a input for preco.
My problem is that when I click the button and call the validate() function http://js.sapo.pt/SAPO/Ink/FormValidator/doc.html if I selected the "fornecedor"s before I click the button validate the form but if I click the button, selected the "fornecedor"s, and click again it will not validate :s
http://jsfiddle.net/rVQB4/3/
the javascript code I'm using:
function formValidate(form){
if(!SAPO.Ink.FormValidator.validate(form, options)){
//some debug
console.log(form);
return false;
}else{
//some ajax calls
return false;
}
}
Here is a video that exlain better the problem: https://dl.dropbox.com/u/6416035/stack3.ogv
sorry my english :s
thanks :)

Livequery works wonders for items dynamically added to a webpage by binding events to events dynamically added to the DOM. If this binding doesn't take place, events won't fire for those dynamic objects.
Here's an example:
$(document).ready(function() {
$("#myDynamicObject").livequery(function() {
$(this).change(function() {
// Do something.
});
});
});
See here for more information on how to use livequery.

jQuery autocomplete prevent focus after selection

Requirement:
I'd like a jQuery autocomplete element that allows the user to pick an item and set the display field and a hidden field with the selected value. But I would also like the field and the hidden field to be cleared when the input field receives focus by the user.
Problem:
The problem I'm facing is that when the user selects an item it's almost like jQuery is executing the onSelect function and then sending the focus to the input field again which fires my focus() event (and therefore clearing my selection).
Problem Browser:
IE8 , works in Chrome. Did not try others.
Attempted fixes:
I have tried setting the focus to another element in the select()
function. It did put the focus on that element but only after
focussing on the input field
Tried both event.preventDefault() and event.stopPropagation() in the
select() method. Did not work.
Blur didnt work either.
Workarounds:
I guess I can change the clearing to be on click instead of on focus, but this is not what I want.
Similar stackoverflow thread:
jquery autocomplete remove focus after suggest
Code:
Here is my code:
$(function () {
$("#autosuggest").autocomplete({
source: "my server path",
minLength: 3,
select: function (event, ui) {
if (ui.item) {
$("#autosuggest").val(ui.item.value);
$("#hidden").val(ui.item.id);
}
}
});
$("#autosuggest").focus(function () {
$("#hidden").val("");
this.value = "";
});
});

The problem is: when you click on an autocomplete suggestion, the focus shifts to that dropdown menu, ever so shortly, to return to your input afterwards. Do you still get this problem if you choose the autocomplete suggestion by using the arrow-down button? If you do not, then this is the problem.
The only way I can see to fix this is not to make it a focus event after all, but I think I know why you don't want to make it a click event: you also want to capture tabbing into the field.
Solution: make it a click handler, and add a 'keyup' handler that executes the click handler handler if the key was a tab (arrow-down etc are still allowed).

I got this from the jQuery forum and it works fabulous!
select: function(event, ui) {
$(event.target).autocomplete("close")
setTimeout(function() {
$(event.target).blur();
})
}
Link: https://forum.jquery.com/topic/autocomplete-input-field-stays-focused-after-selection

Try onSelect function..
$(function () {
$("#autosuggest").autocomplete({
source: "my server path",
minLength: 3,
select: function (event, ui) {
if (ui.item) {
$("#autosuggest").val(ui.item.value);
$("#hidden").val(ui.item.id);
}
},
onSelect: function (suggestion) {
$(this).click();}
});
$("#autosuggest").focus(function () {
$("#hidden").val("");
this.value = "";
});
});