Загрузочный JS конфликтует с пользовательским интерфейсом Jquery


У меня есть блок, который показывает модальный загрузчик с помощью файла шаблона.

Итак, я создал загрузочный модуль с require js, расположенный в app/code/Vendor/Bootstrap/view/web/requirejs-config.js с этим кодом:

var config = {
    paths: {
        "jquery.bootstrap": "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min"
    },
    shim: {
        'jquery.bootstrap': {
            'deps': ['jquery', 'jquery/ui']
        }
    }
};

Я вставляю зависимости в пользовательский интерфейс jQuery, потому что получаю эту ошибку при попытке открыть свой модальный

"невозможно вызывать методы в модальном режиме до инициализации"

(Я нашел это в Интернете).

Итак, мой шаблон (из другого модуля) выглядит так:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#callMeBack">OPEN THE MODAL</button>

<!-- Modal -->
<div id="callMeBack" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                // some content
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
requirejs(['jquery','jquery/ui', 'jquery.bootstrap'], function ($, jQueryBootstrap) {
    $('#callMeBack').modal('hide');
});
</script>

Тогда мой проблема не устранена, у меня всегда ошибка

"Ошибка: невозможно вызвать методы в модальном режиме до инициализации; предпринята попытка вызвать метод "переключение""

Я не знаю, почему я получаю эту ошибку и где я пропускаю исправление. Вы не могли бы мне помочь?

Author: Vishwas Bhatnagar, 2017-02-08

2 answers

Я решаю свою проблему, удаляя загрузочный JS. В настоящее время magento предоставляет множество функций js (модалы, вкладки и т. Д.) И, например, конфликтует с начальной загрузкой js.

 1
Author: Kpone, 2017-04-07 07:58:54

В вашем requirejs-config.js

var config = {
paths: {
    'bootstrap':'js/bootstrap.bundle'
} ,
map: {
    '*': {}
},
shim: {
    'bootstrap': {
        'deps': ['jquery','jquery/ui']
    }
}
};

Затем убедитесь, что вы используете bootstrap.bundle.js вместо того, чтобы bootstrap.js или другие минимальные версии.

 0
Author: Joel Davey, 2018-10-18 10:07:58