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.

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
3
  • 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 ! Commented May 29, 2018 at 11:14
  • @JulianoVargas Might it be that your modal-content doesn't exist yet when the initialize call is done? Commented May 29, 2018 at 11:20
  • If this solved your problem, can you accept my answer please? Commented May 30, 2018 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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.