Magento 2.1: Trigger event after "super-attribute-select" is populated

Question

I have a bunch of configurable products with just one attribute each.

I need to select the first product in the super-attribute-select <select> box (e.g. the second <option>).

This code works from the console...

jQuery('select.super-attribute-select option:nth-of-type(2)').prop('selected', 'selected');
jQuery('select.super-attribute-select').change();

...but not from document.ready, as the <select> box is only populated after the page loads.

Does anyone know the proper technique for doing this?

Answer 1

Thanks to @nshiff for their help. Here is my less than satisfactory but working solution:

document.getElementsByClassName("super-attribute-select").arrive("option", function() {
    $('select.super-attribute-select option:nth-of-type(2)').prop('selected', 'selected');
    window.setTimeout(function() {
        $('select.super-attribute-select').change();
    }, 250);
});

For some reason (I think something to do with require.js) arrive.js isn't registering itself with jQuery, so I'm having to use a good old getElementsByClassName. There's a timeout in there because if I triggered the change() too early it wasn't being picked up.

Answer 2

I had a similar issue where an extension was loading its elements after the document load event. You could solve this in a cheesy way with a setTimeout and wait 2 seconds or something after the page loads.

The way I solved it was by using this community arrive.js library.

jQuery(document).arrive('.something .new', function() {
    console.log('Oh hey, this element just appeared.');
});

Go ahead and take a peek at examples of optimization (not watching the entire DOM tree), but yeah, in essence, you are registering a custom event to fire whenever the new element loads, specified by a normal CSS selector. As I said, this worked in a case similar to yours where elements were not yet loaded at document ready.