I need to do some DOM manipulation within a JS mixin after .html template is loaded.
My mixin is for following component:
module-braintree/view/frontend/web/js/view/payment/method-renderer/hosted-fields.js
Component loads :
module-braintree/view/frontend/web/template/payment/form.html
I’ve made hack way of watching for DOM element using setInterval() to finx if it is loaded or not:
Here is my mixin code:
define([
'jquery',
'uiRegistry'
], function ($, registry) {
'use strict';
return function (hostedFields) {
return hostedFields.extend({
initialize: function () {
this._super();
let intervalId = setInterval(function () {
let braintree = $('#braintree');
if (braintree.length) {
clearInterval(intervalId);
braintree.prop("checked", true);
braintree.click();
}
}, 100);
return this;
}
});
};
});
So my question is:
Is there any better way of manipulating DOM elements of module-braintree/view/frontend/web/template/payment/form.html which is being loaded by AJAX?
It has to be done by JS mixin, without altering form.html itself.