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.

When input box is filled through jquery, the ajax function should be called

I have a form which is populated according to the item selected from popup form. When the input box named "organization" is populated the ajax function should be called. Any idea is highly appreciated ?

If I understand correctly you want to call an ajax function when an input is filled. You can bind an event to your input with
$('#your_input_id').on('blur', function() {
//your ajax call
});
this way your ajax function will be called when the focus is lost on your input
You could also bind when the user presses return / use a timer function to call the ajax function when the user stops typing for X seconds

You want event handler which calls by name attribute so the following code will work :
$('input[name="Organization"]').on('blur', function() {
//your ajax call
});

You can use
focusout jquery method
$('#your_input_id').focusout(function() {
// do stuff here
// use constraint .. it field is not empty whatever is it require
})
More detail Official site

How to run function when input is disabled or reenabled

Is there some way to run a function when a input is disabled/enabled from another part of the code, for example when this code is run:
$('#myinput').prop('disabled', true);
I want another part of the code to be notified about this, but without making it dependent on the other part. Something similar to how "change" event works. But there's no "disabled" event...

You can call notification trigger in the next line with an if statement
document.getElementById("email").disabled=true;
if(document.getElementById("email").disabled == true)
{
alert("Notifying..");
//call the trigger function
}

There is no event that will trigger when those properties are changed.
You can do this some other way.
Set hidden field for this enable disabled value like 1 / 0
$("#hiddenid").trigger("hiddenidchange");
$("#hiddenid").on("hiddenidchange", function () {
});
refer How do I trigger an onChange event for a hidden field?

.on change function works first time not second?

I have a shopping cart that calculates cost and shipping based on quantity and weight. Because of this there are two possible shipping options and I have a function to auto-select the correct shipping on page load. However, if a person changes the quantity the function to select the shipping must run again.
To do this I tried this code:
$('.cartInputText').on('change', function() {
$('#ShippingOptions option').each(function(){
if (this.value == '163182') {
$('#ShippingOptions option[value="163182"]').prop('selected', true)
return false;
}
if (this.value == '163183') {
$('#ShippingOptions option[value="163183"]').prop('selected', true)
return false;
}
});
});
This works the first time I change the quantity. If I change the quantity a second time it doesn't work. How do I fix this so no matter how many times I change the quantity it works?
Update
The onchange event fires the first time but does not fire the second time. Why?

Please use live instead of on, or if the version of jQUery is higher than 1.9, please make you code like this: $(document).on('change','.cartInputText',function(){});
For your sample code, you only bind the function to .cartInputText, if the page re-renders or whatever the reason cause .cartInputText re-generate, it loses the function.
For my code, I bind the function to document and I think you know the event of html element can bubble, you click on .cartInputText and it bubbles up to document and let the function be triggered. More, please check Live and Bind difference in jQuery.

User KeyUp function instead of change for detecting input text.
Like:
$('.cartInputText').keyup(function () {
alert('test');
});
Here's the official jQuery documentation for .keyup().
DEMO

the above code works for the html code which is added before executing the previous statements,
if some other content with the same class (cartInputText) is added dynamically
you need to assign above functionality by calling it again after adding the content.

How to alternate 2 onchange() functions in mvc razor?

I have cascade drop down lists and I should to send form data to controller in every onchange() event. That is why I should to do 2 different operations on onchange() event of dropdownlist.
1) This sends data to controller in every onchange() event of dropdowlists:(It is my first dropdownlist)
#Html.DropDownListFor(model => model.CategoryId, ViewBag.CategoryList as IEnumerable<SelectListItem>, "-",
new { id = "CategoryDDL", onchange = "$('#MyForm').trigger('submit');" })
2)This is for cascade dropdownlists:
<script type="text/javascript">
$(function () {
$("#CategoryDDL").change(
function () {
loadLevelTwo(this);
});
loadLevelTwo($("#CategoryDDL"));
});
function loadLevelTwo(selectList) {
// my some code...
}
</script>
In this case when I change CategoryDDL drop down list, 2 operations mix. It tries to do 2 operation together.
I want to alternate them. Firstly cascading operation works, then data submit operation works.
How can I do this?
EDIT:
Without loadLevelTwo() function, everything works well: when I change dropdown list, request goes to the controller to filter products.
Then I added loadLevelTwo() for cascading dropdown list. Because I have 2 dropdownlist. I want when I change first dropdownlist, second dropdownlist updated automatically. My script does this. But, these events together works mixed. In the controller, I have actions for filtering an for cascading drop down:
public ActionResult FilterProducts(CriteriaModel model) {}
and
public ActionResult GetSubCategoryByCategoryId(int id) {}
These methods work in same time. One line works in any action, then gets into other action. then come backs first action, So, it is surrounded while actions return view.
I send form after loadLevelTwo() function, but it doesn't fix the issue:
loadLevelTwo($("#CategoryDDL"));
$('#MyForm').trigger('submit');

I'd get rid of the onchange on server side and do everything on clienside :
$(function () {
$("#CategoryDDL").change(
function () {
loadLevelTwo(this);
});
loadLevelTwo($("#CategoryDDL"));
$('#MyForm').trigger('submit');
});

It is still not clear what you are asking to do. If you simply want to submit the form and call loadLevelTwo, you can do that through a single binding in your script (and remove the onchange from razor):
$(function () {
$("#CategoryDDL").on('change', function() {
loadLevelTwo(this); // load the next level
$("#MyForm").submit(); // submit the form
});
});
This will complete both tasks in succession.