I have an HTML select dropdown whose value may be edited programmatically. My change event fires when the user edits the value from the page, but not when the value is changed in the code. I need the event to fire in both cases. Any ideas on how to accomplish this?
$("#dropdownId").on('change', function () {
//do stuff
});
...
var df = document.frmMain;
df.dropdownId.value = someValue; //change event does not fire
You can use jQuery's .trigger to fire an event. In your case:
$("#dropdownId").trigger("change");
You need to manually fire the event using jquery trigger function after settig the value :
$("#dropdownId").trigger('change');
use jquery to set selection and for fire change event.
$('#'+df.dropdownId).val(someValue).change();
Related
It's possible (using jQuery or native JS) catch a change event for an input whose value is changed programmatically?? I'm not able to fire the event when the value changes.
Thx for your time.
Sure:
$("input").change(function() {
// listening for changes
});
// triger change event manually
$("input").change();
Most of the jQuery event handlers are also triggers.
For example, you can trigger the change() event as follows:
jQueryElement.change();
Or, you can use the jQuery trigger() function for any event:
jQueryElement.trigger("change");
With regular JavaScript (because jQuery isn't always necessary), use dispatchEvent():
jsElement.dispatchEvent("change");
Links to documentation pages are included.
In my Backbone model's View I have:
events: {
'change textarea' : 'changeContentTextarea',
...
When user enters a text manually into the textarea, it triggers and do this:
this.model.set('content', this.$el.find('textarea').val());
But it doesn't fire when the content is changed in program (using jQuery):
txtarea.val(finalText);
and so the model's attribute does not update and only the text in the textarea changes.
Is there any event that I can bind to address this problem?
Or how can I fire the event after I change the content using jQuery?
From https://api.jquery.com/change/
Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.
So you have to trigger the change event yourself
$("textarea").val(finalText).trigger("change");
The answer below is right and only if you need to know if the event is triggered by user or by JS, you can do this:
$("textarea").val(finalText).trigger("customChange");
and define the listen event like that:
events: {
'customChange textarea' : 'doSomethingWithJSEvent',
I wanting to get the currentTarget to pass to a function, once I have changed the value of a select programmatically.
Is this possible? Something like,
$('input[name="client_id"]').val(model.get('id')) //Change the value of select
this.doSave( $('input[name="client_id"]')); //Do save expects event(e) as parameter
function doSave(event){
console.log($(event.currentTarget);
}
I have simplified this down massively, basically I am changing a select programmatically, and then want to fire my save event, which normally gets triggered on a change event, and as a result takes an event as a parameter, but all I have is the DOM element? Is there a way to send it an event?
Use the change event handler as below :
$('input[name="client_id"]').on('change', function(event) {
console.log($(event.currentTarget);
});
or
$('input[name="client_id"]').on('change', doSave);
function doSave(event){
console.log($(event.currentTarget);
}
First of all,
This
$('input[name="client_id"]')
apparently, changes the value of an input and not select.
This
$('select[name="client_id"]').val(model.get('id'))
changes the selected option in a select.
You can bind the change event on a select like
$('select').change(function(event){
//use event here
//or pass to doSave(event)
});
and it will be fired when call
$('input[name="client_id"]').change();
I am trying to simulate an onclick event on a drop down.
I have an IE object that is going to a page and I need to change a dropdown which has an onchange event:
$('select[name="blah"]').val(3).trigger('change');
$('select[name="blah"]').change(function(){
alert('changed');
});
When I try this, I would expect the alert to fire as it's technically an onchange.
http://jsfiddle.net/3y5hmyf0/
Is there a way to acomplish this?
More Details
My tool is controlling another IE page through an object. It navigates to the page and finds the select drop down on the page. From there, if you did it manually it has an onchange event when making a selection.
I am trying to get jQuery to simulate as if it was being clicked by a person to it triggers that on change event.
I have tried .trigger and .change and couldnt get either of them to work.
The only reason your code does not work is the order you are executing it. You need to connect the handler before triggering it:
JSFiddle: http://jsfiddle.net/3y5hmyf0/1/
// Wire up event handler
$('select[name="blah"]').change(function(){
alert('changed');
});
// Now generate the event
$('select[name="blah"]').val(3).trigger('change');
Note: Your manual change trigger is still required as a change event must normally be triggered by user interaction. Setting the value is not enough.
$('select[name="blah"]').change(function(){
NotifyChanged();
});
function NotifyChanged() {
alert('changed');
}
If you want to test the logic in the changed function, just call it.
I'm trying to get the event associated with an element and try to trigger the respective event. For example if I pass an id for a textbox and it has an event focus binded with it, then I want to trigger that focus event. I know we can get the event details by using
$.data('selector', 'events');
but how to use this object? This should be in jquery or javascript.
Thanks in advance
Not sure why on Earth would you need this. Try triggerHandler
var item = $("selector"),
trigger = function(name){
item.triggerHandler(name);
};
$.each($.data(item[0], "events"), trigger);
Warning This code won't work with delegated events and such. It only triggers handlers bound to matched element.