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.

• Merlinox: As a programmer I hate timeout. But I need to create a push on external system sending the "size" of products and the only why I found (I can't ask it to web agency) was: - tracking the click on size (<li>) - get the select value after 250 ms Thanks

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.

• Geat: Thanks! I did consider the timeout approach, but as you say it's both cheesy and arbitrary (e.g. if there's a delay in receiving the AJAX response)
• Geat: The problem with arrive.js is I'm not waiting for an element to be added, but rather changed (the select box already exists, but is empty). Perhaps I could trigger it on creation of an option inside the select box, but if there are multiple options to be added I'm not sure if that would mess things up...
• nshiff: @Geat I think you can add a CSS selector to account for that.
• nshiff: Oops sorry, posted too soon. For example: jQuery(document).arrive('select option[selected="selected"]'). It's pretty cool, jQuery allows you to target arbitrary attributes of an element. api.jquery.com/attribute-equals-selector
• Geat: Yeah, for sure, but don't forget the select will only have a selected option after I trigger the code I need to using arrive.js.