3

Getting error

magento 2 Error: cannot call methods on modal prior to initialization; attempted to call method 'openModal'

First time it work fine but when I click on button to change area then it throw above error.

my header code

<?php
    // session_start();
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @package   Webkul_Agorae
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */

    // @codingStandardsIgnoreFile
    /**
     * @var \Magento\Theme\Block\Html\Header $block
     */
    $welcomeMessage = $block->getWelcome();

    // Load Editprofile block.
    $CityBlock = $this->getLayout()->createBlock('Webkul\Marketplace\Block\Account\Editprofile');
    // $CityBlock->getAreaOptionArray();
    // echo $CityBlock->getAreaName(2);
    // exit;

    // Session.
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $customerSession = $objectManager->create('Magento\Customer\Model\Session');
    $baseURL = $block->getBaseUrl(); // Base url

    $helper = $this->helper('Webkul\Agorae\Helper\Data');
    // Display Current Location.
    if ( $customerSession->getCity() != null ) {
     $areaID = $customerSession->getArea();
     echo "<li>Your Location: <b>" . $CityBlock->getAreaName( $areaID ) .', &nbsp;'. $customerSession->getCity() . "</b></li>";
     echo '<li><a href="#" id="changeArea">Change Area</a></li>';
    }
    ?>
    <!-- Lahore Areas Options -->
    <div id="lahoreAreas" style="display: none;">
        <?php foreach($CityBlock->getAreaOptionArray(1) as $area) { ?>
         <option value="<?php echo $area['AreaID']; ?>"><?php echo $area['AreaName']; ?></option>
        <?php } ?>
    </div>
    <!-- Islamabad Areas Options -->
    <div id="IslamabadAreas" style="display: none;">
        <?php foreach($CityBlock->getAreaOptionArray(2) as $area) { ?>
          <option value="<?php echo $area['AreaID']; ?>"><?php echo $area['AreaName']; ?></option>
        <?php } ?>
    </div>

    <?php if ( is_null($customerSession->getCity()) ): // If session is not set then pop-up. ?>




    <?php
    // Is home page check.
    $objectManager_ = \Magento\Framework\App\ObjectManager::getInstance();
    $request = $objectManager_->get('Magento\Framework\App\Action\Context')->getRequest();
    if ($request->getFullActionName() == 'cms_index_index') :
     ?>
            <script>





            // Default Pop-up Model JS.
            jQuery(document).ready(function(){

                require(['jquery', 'Magento_Ui/js/modal/modal'], function($,model){

                        $('#modal_content').modal({
                                title: "Please Select Your Area",
                                type: 'popup',
                                responsive: true,
                                innerScroll: true,
                                autoOpen: true,
                                buttons: [{
                                        text:"Select",
                                        click: function() {
                                            document.getElementById('areaform').submit();
                                            this.closeModal();
                                        }
                                }]
                        }).modal('openModal');
                });

            });
            </script>
     <?php  endif; // is home page. ?>
    <?php endif; // session check ?>


     <!-- POP-UP MODEL -->
    <div id='modal_content' style='display:none'>
        <form method="post" id="areaform" action="<?php echo $baseURL; ?>City/Area/Display">
            <div>
                    <label for="exampleInputEmail1">Select City</label>
                    <select class="" name="city" id="" style="with:20% !important" onchange="myFunction(this)">
                        <option value="" selected="selected">--Select City--</option>
                        <option value="Lahore">Lahore</option>
                        <option value="Islamabad">Islamabad</option>
                    </select>
            </div>

            <div>
                <label for="exampleInputPassword1">Area</label>
                <select id="area_dropdown" name="area" class="" /></select>
            </div>
        </form>
    </div>
    <!-- POP-UP MODEL -->


    <?php switch ($block->getShowPart()):
        case 'welcome': ?>
            <li class="greet welcome" data-bind="scope: 'customer'">
                <!-- ko if: customer().fullname  -->
                <span data-bind="text: new String('<?php echo $block->escapeHtml(__('Welcome, %1!', '%1'));?>').replace('%1', customer().firstname)">
                </span>
                <!-- /ko -->
                <!-- ko ifnot: customer().fullname  -->
                <span data-bind="html:'<?=$block->escapeHtml($welcomeMessage) ?>'"></span>
                <!-- /ko -->
            </li>
            <script type="text/x-magento-init">
            {
                "*": {
                    "Magento_Ui/js/core/app": {
                        "components": {
                            "customer": {
                                "component": "Magento_Customer/js/view/customer"
                            }
                        }
                    }
                }
            }
            </script>
        <?php break; ?>

        <?php case 'other': ?>
            <?php echo $block->getChildHtml(); ?>
        <?php break; ?>
    <?php endswitch; ?>


    <script type="text/javascript">
    // onClick popup code.
     jQuery(document).ready(function(){
                    require(['jquery','Magento_Ui/js/modal/modal'],
                            function($,modal)
                            {
                                var options = {
                                     title: "Please Select Your Area 2",
                                        type: 'popup',
                                        responsive: true,
                                        innerScroll: true,
                                        autoOpen: false,
                                        buttons: [{
                                                text:"Select",
                                                click: function() {
                                                    document.getElementById('areaform').submit();
                                                    this.closeModal();
                                                }
                                        }]
                                };

                                        var popup = modal(options, $('#modal_content'));
                                        $("#changeArea").on("click",function(){
                                            $('#modal_content').modal('openModal');
                                        });

                            }
                        );

             });


    function myFunction(selectObject)
    {
       var City = selectObject.value;

       if ( City == 'Lahore')
       {
               // Display Lahore Areas.
               var lahoreAreas = document.getElementById("lahoreAreas").innerHTML;
               document.getElementById("area_dropdown").innerHTML = lahoreAreas;
                // console.log(lahoreAreas);
              // alert(City + lahoreAreas);

       } else if ( City == 'Islamabad') { // Display Islamabad Areas.

               var IslamabadAreas = document.getElementById("IslamabadAreas").innerHTML;
               document.getElementById("area_dropdown").innerHTML = IslamabadAreas;
               // console.log(IslamabadAreas);
               //alert(City + IslamabadAreas );
       } else {

            var EmptyOption = document.createElement("OPTION");
            var Optiontext = document.createTextNode("--Select Area--");
                             EmptyOption.appendChild(Optiontext);
            document.getElementById("area_dropdown").innerHTML = EmptyOption;
       }
    }
    </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.