Magento 2 : Uncaught Error: cannot call methods on modal prior to initialization; attempted to call method 'show'

magento.stackexchange https://magento.stackexchange.com/questions/309960

Question

I am using below code to show modal, I am using semantic UI, I get below error

**

Uncaught Error: cannot call methods on modal prior to initialization; attempted to call method 'show'
    at Function.error (jquery.js:259)
    at HTMLDivElement.<anonymous> (widget.js:186)
    at Function.each (jquery.js:376)
    at jQuery.fn.init.each (jquery.js:142)
    at jQuery.fn.init.$.fn.<computed> [as modal] (widget.js:182)
    at <anonymous>:4:32
    at Object.execCb (require.js:1650)
    at Object.context.execCb (resolver.js:145)
    at Module.check (require.js:866)
    at Module.enable (require.js:1143)

**

My code

 require([
            'jquery','semantic/minjs'
            ], function($,semantic) {            
                $('.ui.modal').modal('show');
            }
        );

I do not want to use magento 2 default modal , instead i want to use semantic-ui modal, while debugging i tried to change jquery version in magento from jquery 1.x to jquery 3.x then above code worked fine but i am getting error on payment pages , is there any fix for it.

Was it helpful?

Solution

I am using Semantic UI Modal

First you need to download and add to your module sementic css and js. click here to download

Get semantic.min.css and semantic.min.js file and also get all fonts from this zip. And Add this files from below path.

app/code/VendoreName/ModuleName/view/frontend/web/css/semantic.min.css

app/code/VendoreName/ModuleName/view/frontend/web/css/semantic.min.js

app/code/VendoreName/ModuleName/view/frontend/web/fonts/copy fonts add here

You need to change font path form semantic.min.css (fonts which you need)

themes/default/assets/fonts/icons.woff

to 

../fonts/icons.woff

Add CSS to your layout by adding this line

app/code/VendoreName/ModuleName/view/frontend/layout

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
            <css src="VendoreName_ModuleName::css/semantic.min.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <!-- Call you Block and phtml  here-->
        </referenceContainer>
    </body>
</page>

Now create requirejs-config.js

app/code/VendoreName/ModuleName/view/frontend

requirejs-config.js

var config = {
    paths: {            
         'semantic': "VendoreName_ModuleName/js/semantic.min"
      },   
    shim: {
    'semantic': {
        deps: ['jquery']
    }
  }
}

And call in your phtml like this

app/code/VendoreName/ModuleName/view/frontend/templates

sementic_modal_call.phtml

<script type="text/javascript">
require([
            'jquery','semantic'
            ], function($,semantic) {    

             $(document).ready(function(){
                 $('.ui.modal').modal('attach events','.test.button','show');  
              })        

            }
        );
</script>

<button id="mybtn" class="ui button test">CLick Here </button>

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Modal Title
  </div>
  <div class="image content">
    <div class="image">
      An image can appear on left or an icon
    </div>
    <div class="description">
      A description can appear on the right
    </div>
  </div>
  <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button">OK</div>
  </div>
</div>

I Hope This Helps You.

OTHER TIPS

By default, Magento 2 provides the Modal popup functionality.

Please check below code to open the modal popup

<div>
    <button id="click-here">Click Here</button>
</div>

<div id="popup-modal-main" style="display:none;">
    <h1> Content for Popup </h1>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function($, modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Popup Title',
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-modal-main'));
            $("#click-here").on('click',function(){ 
                $("#popup-modal-main").modal("openModal");
            });
        }
    );
</script>

Hope it will work for you.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top