Загрузочный 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">×</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>
Тогда мой проблема не устранена, у меня всегда ошибка
"Ошибка: невозможно вызвать методы в модальном режиме до инициализации; предпринята попытка вызвать метод "переключение""
Я не знаю, почему я получаю эту ошибку и где я пропускаю исправление. Вы не могли бы мне помочь?
2 answers
Я решаю свою проблему, удаляя загрузочный JS. В настоящее время magento предоставляет множество функций js (модалы, вкладки и т. Д.) И, например, конфликтует с начальной загрузкой js.
В вашем requirejs-config.js
var config = {
paths: {
'bootstrap':'js/bootstrap.bundle'
} ,
map: {
'*': {}
},
shim: {
'bootstrap': {
'deps': ['jquery','jquery/ui']
}
}
};
Затем убедитесь, что вы используете bootstrap.bundle.js вместо того, чтобы bootstrap.js или другие минимальные версии.