Raise “onChange” event when Input Element changed by JavaScript from Popup Window

Question

I have a webpage with a form element and a popup window (opened by window.open).

Both have jQuery available.

The popup window has a javascript that can change the form element in the opener window. That works perfectly by doing...

$(opener.document.formelement).val(vals[0]);

However by doing that the onChange event will not fire. That would be required by some other page elements, though. So I tried to fire the onChange event myself with

$(opener.document.formelement).change();

But that doesn't do anything.

Any hints? I definitely have to have that onChange event fired due to the architecture of other page elements.

This question is similar to Call Javascript onchange event by programatically changing textbox value, but the suggested solutions from that question don't seem to work for me. Maybe that's because of the popup.

Answer 1

Perhaps its the cross-window that is hurting you... Try making a function inside of opener that you call instead. Might help?

In opener:

window.changeMyElement = function(value) {
  $(formelement).val(value).change();
}

From popup:

opener.changeMyElement(value);

Answer 2

This line is supposed to work:

$(opener.document.formelement).change();

According to the jQuery documentation this line triggers the change event of each matched element.

If it's not working for you then there is a problem in your code somewhere. Can you trigger the onchange event by changing in the form element by hand?

Answer 3

You can also do:

window.opener.document.getElementById('controlname').fireEvent('onchange');

Or in your context:

$(opener.document.formelement).fireEvent('onchange');