0

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>
  • Are you using this code in phtml file? – aravind Oct 30 '19 at 7:30
  • It is working correctly in frontend. I have used this code in list.phtml and review form opens correctly. – aravind Oct 30 '19 at 7:31
  • Have you tried $("#popup-modal").modal(); instead of $("#popup-modal").modal("openModal");? – Shoaib Munir Oct 30 '19 at 8:08
  • Yes tried, but no luck. The problem here is because of bootstrap. Not sure why bootstrap is causing issue. – Sejal Shah Oct 30 '19 at 9:20
  • @aravind can u share the code. I am also adding the code in list.phtml. – Sejal Shah Oct 30 '19 at 9:20
0

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>
| improve this answer | |

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.