jquery Event Listener on DropDown Open - javascript

Having this simple dropdown menu:
<select id="foo">
<option>bar</option>
</select>
And an jQuery listener initialization like this:
$("#foo").on("click", function() {
console.log("stuff");
});
The event is only fired when the user closes the drop down, either by selecting an option or by clicking outside of the box. Is there any way to get the event, when he opens the box?

The right event for this purpose is change click together and will get fire every time that select input changed or clicked.
$("#foo").on("click change", function(e) {
$("#output").html("Event type: " + e.target.nodeName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foo">
<option value="1">foooo</option>
<option value="2">bar</option>
</select>
<div id="output"></div>

Try events:
show.bs.dropdown
shown.bs.dropdown
https://getbootstrap.com/docs/4.0/components/dropdowns/#events

$(document).on('focus', '#foo', function () {
console.log('Dropdown Open');
});
Works for me !!

Related

How to add only one click event on a label?

Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>

JS - apply global function to all select boxes

I have 200+ select boxes, each individually named and with Yes / No / NA as answer options, and now would like to have the background of the <option value="No> option highlighted in red once it is selected.
This works fine via the onchange attribute when adding it to the specific select box, however since I have 200 of those, I do not want to apply this code one by one, but rather apply a global JS function to all <select> boxes, which is where I am stuck. How can I address all select boxes with one JS function?
Javascript:
$('select').on('change', function () {
$(this).focus();
$(this).select();
$(this).className = this.options[this.selectedIndex].className;
});
CSS:
.green{ background-color:green; }
.red{ background-color:red; }
HTML:
<select id="boh_corridor" name="boh_corridor">
<option value=""></option>
<option value="Yes" class="green">Yes</option>
<option value="No" class="red">No</option>
</select>
EDIT: to be exact, the problem is that the option is not highlighted in either red or green at the moment, hence I am suspecting that the function is not being applied. The goal is to have the option highlighted in red/green when selected and while being selected from the dropdown menu.
Two things:
jQuery objects don't have a className property; DOM elements do. Instead of
$(this).className = ...
use
this.className = ...
Your code hooks the change event on select elements that exist as of when that code runs. So you need to be sure they exist prior to running that code. You can do that by ensuring your script tag is at the end of the document, just prior to the closing </body> tag; or by using jQuery's ready callback. Alternately, you can use event delegation (covered later).
Example expecting that the script tag will be at the end of the document (which is where Stack Snippets put it), which is best practice:
$('select').on('change', function() {
$(this).focus();
$(this).select();
this.className = this.options[this.selectedIndex].className;
});
.green {
background-color: green;
}
.red {
background-color: red;
}
<select id="boh_corridor" name="boh_corridor">
<option value=""></option>
<option value="Yes" class="green">Yes</option>
<option value="No" class="red">No</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you don't control where your script tags go or prefer to do something else, using jQuery's ready:
$(document).ready(function() {
// ...the code here...
});
Another option is event delegation. Although change doesn't natively bubble, jQuery makes it bubble, and so you can do this:
$(document).on("change", "select", function() {
$(this).focus();
$(this).select();
this.className = this.options[this.selectedIndex].className;
});
Then it doesn't matter whether the select elements exist or not when you run that code; the event handler is on document, not the individual selects. So it doesn't matter where the script tag is, and you don't need ready.
Example:
$(document).on('change', 'select', function() {
$(this).focus();
$(this).select();
this.className = this.options[this.selectedIndex].className;
});
.green {
background-color: green;
}
.red {
background-color: red;
}
<select id="boh_corridor" name="boh_corridor">
<option value=""></option>
<option value="Yes" class="green">Yes</option>
<option value="No" class="red">No</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Side note: You can use chaining with jQuery objects, rather than repeatedly calling $(): $(this).focus().select();
Do you have a common class for those select boxes? If you do, you can select them doing this:
$(".your_class").on("change", function(){
$(this).addClass("border_red"); //add border to select
$("option",this).removeClass("red"); //clear classes
$("option:selected", this).addClass("red"); //add .red class
});
Check out the fiddle: https://jsfiddle.net/m5mzwyt2/
The code below works for me, both in the sense of highlighting the option value in green / red, and to keep the background color once the option has been selected
JS:
$(document).ready(function() {
$('select').on('change', function () {
$(this).focus();
$(this).select();
this.className = this.options[this.selectedIndex].className;
});
});
I'm not sure what exactly you want to achieve.
I changed your code to:
$('select').on('change', function () {
$(this).focus();
$(this).select();
$(this).css("background-color",$(this).find(":selected").attr("class"));
});
It sets the background color after select based on class name.
Tested on Firefox

Bootstrap popover show/hide on select change

I have a Bootstrap popover on a select box. If I change the value of the select, the popover hides or shows.
Why does the select trigger the popover?
Is this the expected behavior?
How can I prevent this and show/hide the popover independently the state of the select.
HTML:
<select>
<option>012</option>
<option>345</option>
<option>678</option>
<option>910</option>
</select>
JavaScript:
$('select').popover({
title: 'Error',
content: 'Error message'
});
Here's an example in JsBin
You'll need to handle the popover events to control when it's visible.
If you don't want the popup to ever close, that's really simple; just return false on the hide event like this:
$('#myPopover').on("hide.bs.popover", function() {
return false;
});
However, you probably want it to close eventually. So I'd recommend closing it conditionally when the control no longer has focus. When the controls attempts to hide, if the control still has focus, then prevent it from hiding.
Then, since you already handled the close event, you'll have to re-fire the close event later on during the element's blur event like this:
$('#myPopover').on({
"hide.bs.popover": function() {
if ($(this).is(":focus")) return false;
},
"blur": function() {
$(this).popover('hide');
}
});
Demo in Stack Snippets.
$('#myPopover').popover({
title: 'Custom Message',
content: 'Something to look at while selecting'
}).on({
"hide.bs.popover": function() {
if ($(this).is(":focus")) return false;
},
"blur": function() {
$(this).popover('hide');
}
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container">
<select id="myPopover">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>

Issue - Delegate click event jQuery 1.4.2 (IE8)

I used jQuery 1.4.2 and had a problem with delegate click event for radio button on IE8. I had to click twice to trigger click event on radio element.
HTML:
<div id="data"></div>
JS:
jQuery(function () {
jQuery('#data').delegate(':radio', 'click', function () {
alert(1);
});
jQuery("#data").append('<input type="radio" value="abc" name="flight_group"/> abc');
jQuery("#data").append('<input type="radio" value="de" name="flight_group"/> de');
});
Here is my fiddle:
http://jsfiddle.net/secretlm/n4G9Z/3/
Thanks so much.

moving select options up and down via jquery

so I got this code working for Firefox and Chrome...what it does is it allows you to reorder the options within an HTML select form...but then when I tested the code via IE8, it's kind of patchy...it only works for the first few clicks and after that you have to click many times on the button for it to work..
Does anybody know any other code that allows you to reorder select field items that works perfectly in IE8?
<select id="list" multiple="multiple">
<option value="wtf">bahaha</option>
<option value="meh">mwaahaha</option>
</select>
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
Add Item
Remove item
<script>
$(document).ready(function(){
$('#mup').click(function(){
moveUpItem();
});
$('#mdown').click(function(){
moveDownItem();
});
});
function moveUpItem(){
$('#list option:selected').each(function(){
$(this).insertBefore($(this).prev());
});
}
function moveDownItem(){
$('#list option:selected').each(function(){
$(this).insertAfter($(this).next());
});
}
Your code for changing the options works fine. It seems IE8 isn't handling a "fast" second-click with the click event but rather expects a double click to be handled.
Using my test code below, you'll notice that in IE8 writes out the following when Move Down/Up is pressed "fast":
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Double-Click
But with FF/Chrome the following is printed:
Move Down Click
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Click
Move Down Double-Click
Here's the code I'm using to test. I haven't done any tests to see if it's jQuery's event binders that are causing the issues.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<select id="list" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
<script type="text/javascript">
var $DEBUG = null;
$(document).ready(function ()
{
$DEBUG = $("#debug");
$DEBUG.append("Registering Events<br />");
$("#mup").click(moveUpItem);
$("#mdown").click(moveDownItem);
$("#mup").bind("dblclick", function ()
{
$DEBUG.append("Move Up Double-Click<br />");
});
$("#mdown").bind("dblclick", function ()
{
$DEBUG.append("Move Down Double-Click<br />");
});
});
function moveUpItem()
{
$DEBUG.append("Move Up Click<br />");
}
function moveDownItem()
{
$DEBUG.append("Move Down Click<br />");
}
</script>
<div id="debug" style="border: 1px solid red">
</div>
</body>
</html>
EDIT: I can confirm it is IE8 that is the problem. Swap this IE8-specific code in the $(document).ready() handler:
// $("#mup").click(moveUpItem);
$("#mup")[0].attachEvent("onclick", moveUpItem);
// $("#mdown").click(moveDownItem);
$("#mdown")[0].attachEvent("onclick", moveUpItem);
// $("#mup").bind("dblclick", function ()
$("#mup")[0].attachEvent("ondblclick", function ()
{
$DEBUG.append("Move Up Double-Click<br />");
});
// $("#mdown").bind("dblclick", function ()
$("#mdown")[0].attachEvent("ondblclick", function ()
{
$DEBUG.append("Move Down Double-Click<br />");
});
Example:
to move 3rd option before 1st option, we can use below jquery:
$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));
I think this will give some ideas of how to do it, you can dynamically place any option before one known position just by knowing the values of both, the one to move and the one of the position:
How would you dynamically order an <option select> list using JQuery?
I know this one is a bit old, but I recently made this simple jQuery plugin to be able to reorder elements in a multiple select element.
Have a look and see if it helps for you, I tested in IE8,IE9,Chrome,FireFox,Opera.
http://fedegiust.github.io/selectReorder/

Categories

Resources