0

Ive created a custom component with a template in Magento_Checkout summary :

this is my modal-custom.html:

<div id="modal-content">TEST</div>
<button id="example-modal-button" data-bind="event:{ click: openModal}">
Open modal
</button>

And Here is my js:

define(
    [
        'uiComponent',
        'jquery',
        'Magento_Ui/js/modal/modal',
        'ko'
    ],
    function (Component, $, modal, ko) {
        'use strict';
        var options = {
            autoOpen: true,
            responsive: true,
            clickableOverlay: false,
            modalClass: 'modal-custom',
            title: 'Popup',
            buttons: [{
                text: 'Click Me',
                click: function () {
                    console.log('test')
                }
               }]
            };
        return Component.extend({
            defaults: {
                template: 'Magento_Checkout/view/summary/modal-custom'
            },
            initialize: function (elem) {
                this._super();
                this.startModal();
                return this;
            },
            startModal: function () {
                var ele = $('#modal-content');
                var popup = modal(options, ele); //This is causing the error possibly the ele var;
            },
            openModal: function () {
                $('#modal-content').modal('openModal');
            }

        });
    }
);

It's all fine apart from that when I initialize:

this.startModal();

it Gives Error: Uncaught TypeError: Cannot read property 'nodeName' of undefined

Any helps why it can't find/fire/initialize the modal $('#modal-content')?thanks.

1

Try using:

        startModal: function () {
            var ele = $('#modal-content');
            var popup = ele.modal(options);
        }

Alternatively you could also get rid of the startModal method and go with:

        openModal: function () {
            $('#modal-content').modal(options).modal('openModal');
        }

Though your startModal is neater.

  • I've tried it doesn't give errors but I don't think it initialises : the error now is on click openModel Uncaught Error: cannot call methods on modal prior to initialization; attempted to call method 'openModal' However the 2 option alternative worked ! – Juliano Vargas May 29 '18 at 11:14
  • @JulianoVargas Might it be that your modal-content doesn't exist yet when the initialize call is done? – Rian May 29 '18 at 11:20
  • If this solved your problem, can you accept my answer please? – Rian May 30 '18 at 11:19
0

If you want to just initialize the Modal widget without any additional logic, you can use mageInit bind instead of creating separate model.

For example:

data-bind="{mageInit: {'Magento_Ui/js/modal/modal' : { ..your parameters..}}"

Hope it helps.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.