Question

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.

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top