We Keep Coding

what is the best jsript event handler to use when data is change through other script for select? [duplicate]

The logic in the change() event handler is not being run when the value is set by val(), but it does run when user selects a value with their mouse. Why is this?
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<script>
$(function() {
$(":input#single").change(function() {
/* Logic here does not execute when val() is used */
});
});
$("#single").val("Single2");
</script>

Because the change event requires an actual browser event initiated by the user instead of via javascript code.
Do this instead:
$("#single").val("Single2").trigger('change');
or
$("#single").val("Single2").change();

I believe you can manually trigger the change event with trigger():
$("#single").val("Single2").trigger('change');
Though why it doesn't fire automatically, I have no idea.

Adding this piece of code after the val() seems to work:
$(":input#single").trigger('change');

As far as I can read in API's. The event is only fired when the user clicks on an option.
http://api.jquery.com/change/
For select boxes, checkboxes, and
radio buttons, the event is fired
immediately when the user makes a
selection with the mouse, but for the
other element types the event is
deferred until the element loses
focus.

To make it easier, add a custom function and call it whenever you want to change the value and also trigger a change:
$.fn.valAndTrigger = function (element) {
return $(this).val(element).trigger('change');
}
and
$("#sample").valAndTrigger("NewValue");
Or you can override the val() function to always call the change when val() is called:
(function ($) {
var originalVal = $.fn.val;
$.fn.val = function (value) {
this.trigger("change");
return originalVal.call(this, value);
};
})(jQuery);
Sample at http://jsfiddle.net/r60bfkub/

In case you don't want to mix up with default change event you can provide your custom event
$('input.test').on('value_changed', function(e){
console.log('value changed to '+$(this).val());
});
to trigger the event on value set, you can do
$('input.test').val('I am a new value').trigger('value_changed');

If you've just added the select option to a form and you wish to trigger the change event, I've found a setTimeout is required otherwise jQuery doesn't pick up the newly added select box:
window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);

I ran into the same issue while using CMB2 with Wordpress and wanted to hook into the change event of a file upload metabox.
So in case you're not able to modify the code that invokes the change (in this case the CMB2 script), use the code below.
The trigger is being invoked AFTER the value is set, otherwise your change eventHandler will work, but the value will be the previous one, not the one being set.
Here's the code i use:
(function ($) {
var originalVal = $.fn.val;
$.fn.val = function (value) {
if (arguments.length >= 1) {
// setter invoked, do processing
return originalVal.call(this, value).trigger('change');
}
//getter invoked do processing
return originalVal.call(this);
};
})(jQuery);

$(":input#single").trigger('change');
This worked for my script. I have 3 combos & bind with chainSelect event, I need to pass 3 values by url & default select all drop down. I used this
$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');
And the first event worked.

To change the value
$("#single").val("Single2");
Also to trigger a change event
$("#single").val("Single2").change();
this logic is instrumental when multiple select options are on a page.
one changes and other select options have to change but do not trigger a change event.

2 JavaScript events triggered sequentially - 2nd one ignored

I have an input text box and a button on a page.
have an onchange event on the text box and an onclick on the button. Each event triggers a totally separate unrelated method.
The problem is as follows:
if the user makes changes to the text box, then right away goes to click on the button - the onchange is triggered but I lose the onclick.
can I avoid this? I need both events to happen.
Thanks
Updated:
I tried a very simple test locally:
<input type="text" onchange="alert1();"/>
<input type="button" onclick="alert2();"/>
where the js is :
<script type="text/javascript">
function alert1()
{
alert("1");
}
function alert2()
{
alert("2");
}
</script>
changing the text and right away clicking on the button only triggers the first event. Is there a way to force the second event to happen?

An alert (along with other modal dialogs) is a bit of a special case, since it suspends execution of the remainder of the script until the user clicks OK. This is why your second handler falls through the cracks.
If you did something like document.write('foo') in your handlers instead, you wouldn't have this problem.

Try this,
function showAlert1() {
setTimeout(function(){ alert("ONE") }, 250);
}
function showAlert2() {
setTimeout(function(){ alert("TWO") }, 250);
}​
It buffers the execution of each function so that the button's onclick can be triggered.

HTML dropdown can't capture onChange() if there is only one value in dropdown

I am using Jquery, for selecting value of drop-down.
I need do do some action on OnChange event (.change in jQuery) , but if there is only one option in drop-down I am not able to capture it in onChange event.
My drop-down is formed dynamically, so don't know how many options I'll get how many options, but I am facing problem if there is just one option.
Is there any way to capture OnChange event for <select> with only one <option>?

You don't need to have an onchange event. Just have a function that gets called from onchange, and if there is only one item, just go ahead and call that function.
function populate() {
//do work to populate #selector
if($("#selector option").length == 1) {
$("#selector").hide();
workerFunction();
} else {
$("#selector").show();
}
$("#selector").change(workerFunction);
//the following line of code will work like a default:
workerFunction();
}
function workerFunction() {
//put whatever used to be in your onChange function here
}

onchange event occurs when the internal state of the element is changed. Since you have a dropdown with a unique value, its state is never changed so the event is not fired.

<label for="checkboxThatUsedToBeASelect">
<input type="checkbox" id="checkboxThatUsedToBeASelect" name="checkboxThatUsedToBeASelect" value="something" />
</label>
$('#checkboxThatUsedToBeASelect').change( function(){
});
Now you have a more user-friendly input, and it'll trigger the change when it is checked or unchecked. :D

How about a conditional event binder? Something like:
var changeHandler = function (method) {
alert(method);
};
if ($('select option').length > 1) {
$('select').change(function() {
changeHandler('change');
});
} else {
$('select').click(function() {
changeHandler('click');
});
}

It sounds like you have a HTML error in your options tags.
In addition to that, in order to target something created dinamically with jQuery, you have to use delegators.
$('selector').change( function(e){...}); // without delegator
$('body').on('change','selector', function(e){...}); // with delegator, it detects even an element added dinamically
This said, you should be abble to detect on change for new and old elements

.change looks for another inmate to switch places. in your case sadly, there is a home alone case and hence the event is not firing.

JavaScript/jQuery - textchange

I have a html- input type="text", and I want to add this tag an event handler that will work when the text is changes. The problem is that this input is getting his value from antoher javascript function and then the event handler isn't working.
For example
This is the event:
$("#inputid").change(function(){
alert('bla bla')
}
And this what need to raise the event
function inputvalue(){
$("#inputid").val="bla"
}
Unfortunately when the value of the input is changing (from the function inputvalue),it doesn't raise the event. If I put the value of the input manually the event is working
Any idea why the javascript doesn't reconize the text change from a script?

You can trigger the change event yourself in the inputvalue function:
function inputvalue(){
$("#inputid").val("bla").change();
}
Also notice the correction of your syntax... in jQuery, val is a function that takes a string as a parameter. You can't assign to it as you are doing.
Here is an example fiddle showing the above in action.

Your function has an error. Try this:
function inputvalue(){
$("#inputid").val()="bla"
}
EDIT
My function is also wrong as pointed in comments.
The correct is:
Using pure javascript
function inputvalue(){
document.getElementById("inputid").value ="bla";
}
Using jQuery
function inputvalue(){
$("#inputid").val("bla");
}

Submit shouldn't blur textarea with jQuery?

I have a textarea with a blur function:
$("#comment").blur(function() {
...something
});
I don't want this blur() to happen when I click on the submit button below. How can I solve this?

Have you tried taking a look at When onblur occurs, how can I find out which element focus went *to*? -- it should help in this case so you can determine whether to fire the 'blur' function or not based on where the focus went to

a normal submit is a PAGE REFRESH
So: when your page loads again, the blur() code will get called as well

In your submit pass a variable back to the server in the form that indicates that it was a form submit (ie a meaningful flag). When you re-render the page render it with the flag, stating it was a form submit, in javascript. Look for that flag in your blur handler, clear it, and return false.

Something like this should work:
var _commentBlurTimer = 0;
$("#comment").blur(function() {
_commentBlurTimer = window.setTimeout(function() {
//...something
}, 500);
});
$("input[type=submit]").click(function() {
if (_commentBlurTimer)
window.clearTimeout(_commentBlurTimer);
});
Test case: http://jsfiddle.net/yahavbr/a9xZW/