Manual Javascript event not propagating to element inside iFrame context
I am working on a WYSIWYG design that allows end users to select colors via fields [input type = "color"]. This interface has inputs on the left side and on the right side is an iframe pointing to the generated preview. Typically, when the input is clicked and the color changes, it calls the update function (tied to the base view via the change event in the input field). This update function then changes the CSS values in the iFrame for live preview. It works fine.
However, I am creating a unit test page that essentially checks that changing the input field to a specific color will actually change the color in the preview. Essentially this: "Change the input to PINK. Did this input make the appropriate CSS selector when viewing the PINK preview?"
The unit test page structure is that the constructor is loaded via an iFrame. So now we have:
- Level 0: unit test report
- Level 1: color change inputs
- Level 2: Live Preview
So here's the problem: When the unit's tests run, it successfully changes the value of the input fields, but the subsequent change event doesn't seem to hit the view, so the live preview is not updated.
Here is the code:
for (i in testable) {
item = testable[i];
item.element.val(tempColor);
item.element.trigger('change');
}
If I pulled this out of the scope of the testing unit and used the browser console, this code has the same effect (input updates, but the trigger is never called):
$("#testFrame").contents().find('input#cat_RowColoralternate').val('#AAEFCC').trigger('change')
To prove that the event exists and actually works, if I load it directly without a test layer (for example, when loading the app directly), this code works exactly as expected.
$(document).find('input#cat_RowColoralternate').val('#AAEFCC').trigger('change');
The only difference is the extra level of the iFrame, so my theory is that the event does not propagate from level 0 to level 1.
source to share
I don't believe you can fire jQuery events across a frame this way. The call .trigger()
happens on the parent frame and therefore does not work correctly / at all on the jQuery object in the iframe.
Instead, you need to get the jQuery object inside the iframe and trigger the trigger there:
var framejQuery = $('#testFrame').get(0).contentWindow.$;
framejQuery('input#cat_RowColoralternate').val('#AAEFCC').trigger('change');
source to share