1

I am using Magento modal popup for various functionalities in checkout. I am working on an address validation module that fetches the corrected address from USPS API and displays the corrected address as an option in the popup. Now when the user selects the address and clicks on a button that changes the user address and closes the popup, I get the following error.

Uncaught TypeError: Cannot read property 'remove' of null
    at $.(anonymous function).(anonymous function)._destroyOverlay

This only happens when I close the popup and navigate to the next step at the same time.

But when I close the popup from the close button given by default on the popup, it does not give any error.

2 Answers 2

0
define(
[
    'jquery',
    'Magento_Ui/js/modal/modal'
],
function($) {
    "use strict";

    $.widget('mage.modalForm', {
        options: {
            modalForm: '#modal-lens-form',
            modalButton: '.open-modal-form'
        },
        _create: function() {
            this.options.modalOption = this._getModalOptions();
            this._bind();
            this._hide();
        },
        _getModalOptions: function() {
            /**
             * Modal options
             */
            var options = {
                type: 'popup',
                responsive: true,
                title: 'Select Product'
            };

            return options;
        },
        _bind: function(){
            var modalOption = this.options.modalOption;
            var modalForm = this.options.modalForm;

            $(document).on('click', this.options.modalButton,  function(){

                if ($('#product_addtocart_form').valid()) { //Open modal only if validation passes on base product form
                    //Initialize modal
                    $(modalForm).modal(modalOption);
                    //open modal
                    $(modalForm).trigger('openModal');
                }    
            });
        },
        _hide: function(){
            $(this.options.modalForm).hide();
        }
    }



    );

    return $.mage.modalForm;
}
);
1
  • This answer does not fit in the context of the question. please explain what you are trying to do with the above script. Feb 14, 2018 at 7:05
0

I ran into the same issue with custom buttons on modals in checkout. I fixed it with adding a triggerEvent to modal options

 var options = {
               ...
                 triggerEvent: 'blur', ...
};

maybe this will work for you, if you haven't fixed it already

Your Answer

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

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