I set field value w/ javascript, onchange not triggered. Alternative solution?

Question

I have read some solutions to this, none of which are hassle free, so I thought maybe some modern solution now exist to remedy this. It should anyways, since the problem has been around for a while. Something in the more recent jQuery updates perhaaps?

I set my form field like this:

parent.window.document.getElementById(parent.window.imageInputField).value = '{{ path }}'+image;

and I have an onchange event like this that I would like to fire upon my field update as of above.

$('#data_1').change(function(){
img = "url(" + $('#data_1').val() + ")"
$('#slide_bg').css("backgroundImage", img );
});

---

UPDATE

so this code works fine:

alert( $('#'+parent.window.imageInputField, window.parent.document).val() );

while this doesn't do anything, no error or nothing

$('#'+parent.window.imageInputField, window.parent.document).change();

The change event is defined here

$('#data_1').change(function(){
alert('change event called');
img = "url(" + $('#data_1').val() + ")"
$('#slide_bg').css("backgroundImage", img );
});

and this works perfect:

<input type='button' value='Uppdatera förhandsgr.' onclick="$('#data_1').change()" />

All I want is to trigger what this button does, but by code... anyone see where I went wrong?

Answer 1

you need to trigger the change handler with your code. Updating a value with script will not trigger change event

parent.window.document.getElementById(parent.window.imageInputField).value = '{{ path }}'+image;
$('#data_1').change()