order of Events for Select element in html - javascript

I only tested this so far in chrome browser.
I have the html select element below defined:
HTML
<select class="ddl" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
I have the following script:
Javascript + jQuery
$(document).ready( function () {
$('.ddl').change( function () { alert('ddl changed'); });
$('.ddl').click( function () { alert('ddl clicked'); });
});
In the browser,
- if you quickly click on an item in the list box, you will see that the order of events start with change then click.
- if you hold the mouse down for a 10 seconds then release it (long press), click fires then change.
jsFiddle
I change the code to below script (add mouseup event),
Javascript + jQuery
$(document).ready( function () {
$('.ddl').change( function () { alert('ddl changed'); });
$('.ddl').click( function () { alert('ddl clicked'); });
$('.ddl').mouseup( function () { alert('ddl mouseup'); });
});
I get mouseup, change, then click regardless of the speed of the click.
jsFiddle
Isn't the order of events supposed to stay the same? Is this a chrome bug?
UPDATE
In firefox, change, mouseup, and then clicked on a fast click, and only click event is eliminated on a slow click.
In IE11, change then click is fired on fast click, only mouseup is fired on slow click.
UPDATE with adeneo's suggestion:
jsFiddle1
Javascript + jQuery
$(document).ready( function () {
$('.ddl').change( function () { console.log('ddl changed'); });
$('.ddl').click( function () { console.log('ddl clicked'); });
});
Chrome: no change
Firefox: no change
IE11: no change
jsFiddle2
Javascript + jQuery
$(document).ready( function () {
$('.ddl').change( function () { console.log('ddl changed'); });
$('.ddl').click( function () { console.log('ddl clicked'); });
$('.ddl').mouseup( function () { console.log('ddl mouseup'); });
});
Chrome: no change
Firefox: no change
IE11: no change
UPDATE based on Wesley Murch's suggestion:
I have a software package that I am working with. The software package generates HTML dynamically (template driven). The feature I am working on is Cascading dropdowns. There are some dropdowns in that have attributes to show hierarchy. To build the the dependency, I thought I would bind to the change event and call a webservice to update the child dropdown. Now the dilemma I have is that there is pre-existing code that binds to various events. I think the pre-existing code has some code that stops processing of subsequent events. I cannot change that code at the time being. I always thought that the change event is triggered before the click event. It works fine if you do a quick click in chrome, but if you hold your mouse down while you think of the selection for a couple seconds my code for cascading dropdown does not get called.
Sorry for the lengthy explanation.

<script>
$(document).ready(function () {
$('.ddl').change(function () {
console.log("change");
});
$('.ddl').click(function () {
console.log("click");
});
});
</script>
<select class="ddl" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
order
click select.html:15
change select.html:11
2
click select.html:15
change select.html:11
click

Related

How to trigger a jquery function on page load?

I have the following function:
$('#borderColor').on('change', function() {
// update inventory
updateInventory(this.options[this.selectedIndex].text);
});
How can I automaticcally trigger this function when the page loads?
Just trigger the change event on the select on page load. This way you don't need to write duplicate code, and everything is handled at one place.
with $('#selector').trigger() you can trigger any event, like change, click, input, etc... you're listening to.
With $(document).ready(function() { /** your code here **/}) you can set code you wish to run after the page has finished loading and rendering.
function updateInventory(value) {
$('#inventory').text(value);
}
$('#borderColor').on('change', function() {
// update inventory
updateInventory(this.options[this.selectedIndex].text);
});
$(document).ready(function() {
$('#borderColor').trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="borderColor">
<option value="red">red</option>
<option value="blue" selected="selected">blue</option>
</select>
<div id="inventory">
</div>
Did you heard the jquery trigger?
$(function() {
$('#borderColor').trigger('change')
});

Execute jQuery function on load and change

I have a select field in a form, and wish to execute some jQuery when the field is changed or when the page is reloaded on form submit.
<select name="emp_status_id" class="emp-status-id" >
<option value=""></option>
<option value="1">Full-Time Employment</option>
<option value="2">Part-Time Employment</option>
<option value="3">Casual</option>
<option value="4">Self Employed</option>
</select>
My jQuery is below
function employmentGroups(id){
var emp_status_id = id.val();
// Do more stuff here
};
$( ".emp-status-id" ).change(function() {
employmentGroups($(this));
});
Not: I am passing $(this) into the function rather than getting $(this) inside the function for another reason which isn't relevant to the current question.
This works perfectly well on change.
I would also like to execute the function on page load,
My problem is that I do not understand which jQuery method to use to execute this function on load.
I have tried this...
$( ".emp-status-id" ).ready(function() {
employmentGroups($(this));
});
However this does not work.
Better way to access this selectbox value by id.
Here is working code:
<select id="emp_status_id" name="emp_status_id" class="emp-status-id" >
<option value=""></option>
<option value="1">Full-Time Employment</option>
<option value="2">Part-Time Employment</option>
<option value="3">Casual</option>
<option value="4">Self Employed</option>
</select>
function employmentGroups(selector_id){
var emp_status_id = $(selector_id).val();
// Do more stuff here
};
// on page loaded
$(function() {
// set onchange handler
$("#emp-status-id").change(function() {
employmentGroups('#emp-status-id');
});
// just execute
employmentGroups('#emp-status-id');
});
$(document).ready(function(){ employmentGroups($( ".emp-status-id" )); })
Looking for this?
there's two ways to do such a thing like this
1- using load() but this will fire whatever the code inside every time page reload even when the use open the page for the first time
$(window).load(function() {
// do whatever you want
});
2- using built-in PerformanceNavigation interface ... i didn't test such a case to use it but it exactly for detecting navigation behavior
if (performance.navigation.type === 1) {
console.log('page reloaded');
}
or (is the same as above but with different syntax)
if (performance.navigation.type === PerformanceNavigation.TYPE_RELOAD){
console.log('page reloaded');
}
for further reading W3 and MDN

jquery selected value of select box doesn't change result

I am trying to change the price result using .change on the storage select box by using the chrome console but what happens is that the price doesn't update.
I tried different other ways such as .click .trigger , still the select box switches between 16gb to 64gb back and forth but the price doesn't update. The price only updates when I manually change the select box value with the mouse.
What might be causing it not to switch? Are there any alternative way to trigger the event by code?
*** edit: this is not my code, I am just trying to understand how to get the data if the .click doesn't work through the console
The click() method is not necessary unless you explicitly want to trigger that event.
I've added a click() event listener and call on the last change here.
var select = $("#test_select");
select.on('click', function() {
alert('click event');
});
setTimeout(function() {
select.val("2");
}, 1000);
setTimeout(function() {
select.val("3");
}, 2000);
setTimeout(function() {
select.val("4");
}, 3000);
setTimeout(function() {
select.val("5").click();
}, 4000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test" id="test_select">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

Behave differently when selecting a dropdown select by click or arrow keys

<select id="s">
<option value="1">selected1</option>
<option value="2">selected2</option>
<option value="3">selected3</option>
<option value="4">selected4</option>
</select>
<div id="se">
</div>
$('body').on('change', '#s', function() {
$('#se').text($('#s :selected').text()+" / unfortunatly it also triggers when Im moving with the UP and DOWN keys, not just with select");
});
https://jsfiddle.net/8kLke2je/
I want this event triggered if I pick an item from the dropbox with mouseclick and not with UP and DOWN arrows.
Just use the "click" event on the select:
$('#s').click(function(){
var sv = $('#s').val();
$('#se').html("That\'s it: "+sv);
});
Here there is a fiddle for it: https://jsfiddle.net/nemoneminis/rwza9xzt/1/
.on passes the event into the callback function. You can utilize that to detect whether it was a click or keypress.
If you bind separately to click and keyup, you can detect which one by checking the event type:
$(document).on('click keyup', '#s', function(e) {
if ('click' == e.type) {
$('#se').text($('#s :selected').text());
}
});

How to stop a select menu form opening or changing?

$('#selectmenu').on('keyup focus mousedown', function(e) {
e.preventDefault();
});
but when it is selected by pressing tab i can change the value by pressing up & down key.how to stop it?
Block the tab key.
$('/*The Previous Input */').on('keydown', function(e) {
if (e.keyCode == 9) {
e.preventDefault();
}
});
I don't have your HTML, so i can't test or integrate the code.
You also can use disabled="disabled", i think is a better solution.
You use off() or unbind() methods of jQuery:
<select id="dropDown" name="dropDown" style="margin-top: 5px; width: 150px;">
<option value="select">Select </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="All">All </option>
</select>
<button id="stopChange" >Stop</button>
<button id="StartChange" >Start</button>
jQuery code:
$("#stopChange").click(function () {
$("#parSelCategor").unbind("change");
});
$("#StartChange").click(function () {
$("#parSelCategor").bind("change");
});
You may listen you a more global event like 'onchange' and change the value back to the previous one when the event trigger.
Disabling the select may work too.
Edit : 'keydown' seems like a good idea too.
you can change the tabindex of the select box
$('#selectmenu').attr('tabindex', -1).on('keyup focus mousedown', function (e) {
e.preventDefault();
});
or best way is just disable the control
$('#selectmenu').attr("disabled", true);
Demo
Here's a solution that simply forces the selection to stay the same if some variable (stopChange) is true.
JS (jQuery):
var stopChange = true;
var opt = $('option:selected');
$('#selectmenu').on('change', function () {
if (stopChange) {
opt.attr('selected', true);
}
});
Here's a fiddle.

Categories