1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.