Magento 2 - No method named openmodal when bootstrap bundle js is used
-
17-03-2021 - |
Question
I want to display a review form in the modal popup on the click of a button. However, the code gives this error
Uncaught TypeError: No method named "openModal"
I am using bootstrap.bundle.js
in my application. If I remove that the popup is displayed without any error message.
Code I am using:
<div>
<a href="#" id="click-me">Click Me</a>
</div>
<div id="popup-modal" style="display:none;">
<?php echo $this->getLayout()->createBlock("Magento\Review\Block\Form")->setTemplate("Magento_Review::form.phtml")->toHtml(); ?>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: 'popup modal title',
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-modal'));
$("#click-me").on('click', function () {
$("#popup-modal").modal("openModal");
});
}
);
</script>
No correct solution
OTHER TIPS
I have also faced same problem. Its due to merging the modal.js in the bundle.js files
In magento 2 we can exclude the modal.js file from bundling by placing the exclude code in
/design/frontend/<--Magento-->/<--Luma-->/etc/view.xml
<exclude>
....
<item type="file">Lib::mage/bootstrap.js</item> <!-- for excluding bootstrap-->
<item type="file">Lib::Magento_Ui/js/modal/modal.min.js</item><!-- for excluding modal-->
....
</exclude>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange