we recently upgraded from magento 2.4.3 to magento 2.4.6. In my previous version below code is working properly.
/**
* Magedelight
* Copyright (C) 2019 Magedelight <[email protected]>
*
* @category Magedelight
* @package Magedelight_Catalog
* @copyright Copyright (c) 2019 Mage Delight (http://www.magedelight.com/)
* @license http://opensource.org/licenses/gpl-3.0.html GNU General Public License,version 3 (GPL-3.0)
* @author Magedelight <[email protected]>
*/
define([
'jquery',
'underscore',
'uiRegistry',
'jquery/ui'
], function ($, _, registry) {
'use strict';
$.widget('mage.vendorOffers', {
_create: function () {
this._on({
'click': '_showPopup'
});
},
_initModal: function () {
var self = this;
var title = 'New Vendor Offer';
if(this.options.mode == 'edit'){
title = this.options.title;
}
this.modal = $('<div id="create_new_vendor_offer"/>').modal({
title: $.mage.__(title),
type: 'slide',
buttons: [],
opened: function () {
$(this).parent().addClass('modal-content-vendor-offer');
self.iframe = $('<iframe id="create_new_vendor-offer_container">').attr({
src: self._prepareUrl(),
frameborder: 0
});
self.modal.append(self.iframe);
self._changeIframeSize();
$(window).off().on('resize.modal', _.debounce(self._changeIframeSize.bind(self), 400));
},
closed: function () {
var doc = self.iframe.get(0).document;
if (doc && $.isFunction(doc.execCommand)) {
//IE9 break script loading but not execution on iframe removing
doc.execCommand('stop');
self.iframe.remove();
}
self.modal.data('modal').modal.remove();
$(window).off('resize.modal');
}
});
},
_getHeight: function () {
var modal = this.modal.data('modal').modal,
modalHead = modal.find('header'),
modalHeadHeight = modalHead.outerHeight(),
modalHeight = modal.outerHeight(),
modalContentPadding = this.modal.parent().outerHeight() - this.modal.parent().height();
return modalHeight - modalHeadHeight - modalContentPadding;
},
_getWidth: function () {
return this.modal.width();
},
_changeIframeSize: function () {
this.modal.parent().outerHeight(this._getHeight());
this.iframe.outerHeight(this._getHeight());
this.iframe.outerWidth(this._getWidth());
},
_prepareUrl: function () {
return this.options.url +
(/\?/.test(this.options.url) ? '&' : '?');
},
_showPopup: function () {
this._initModal();
this.modal.modal('openModal');
}
});
return $.mage.vendorOffers;
});
In 2.4.6 am facing below error in the consloe.
vendor-offers.js:64 Uncaught TypeError: Cannot read properties of undefined (reading 'modal')
at $.<computed>.<computed>._getHeight (vendor-offers.js:64:49)
at $.<computed>.<computed>._getHeight (jquery-ui.js:143:25)
at $.<computed>.<computed>._changeIframeSize (vendor-offers.js:79:54)
at $.<computed>.<computed>._changeIframeSize (jquery-ui.js:143:25)
at HTMLDivElement.opened (vendor-offers.js:45:26)
at $.<computed>.<computed>._trigger (jquery-ui.js:717:13)
at executeBound (underscore.js:986:71)
at HTMLElement.<anonymous> (underscore.js:1018:20)
at HTMLElement.<anonymous> (underscore.js:74:37)
at HTMLElement.fn (jquery.js:5175:31)
Any help can be appreciated, thanks!
