Модальний завантажувальний механізм: не є функцією

У мене є модальний на своїй сторінці. Коли я намагаюся викликати його під час завантаження Windows, він видає помилку на консолі, яка говорить:

$(...).modal is not a function

Це мій модальний HTML:

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

І це мій JavaScript, щоб запустити його, коли завантажується вікно:

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Як я можу виправити цю проблему?

У вас є проблема в порядку скриптів. Завантажте їх у такому порядку:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Чому це? Оскільки Bootstrap JS залежить від jQuery :

Залежно від плагіна

Деякі додатки та компоненти CSS залежать від інших плагінів. Якщо ви включаєте плагіни окремо, переконайтеся, що ці документи є у документах. Також зауважте, що всі плагіни залежать від jQuery (це означає, що jQuery повинен бути включений перед файлами плагінів ).

Це попередження також може бути показане, якщо jQuery у вашому коді оголошено більше одного разу. Друга декларація jQuery перешкоджає коректній роботі bootstrap.js.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Проблема пов'язана з тим, що екземпляри jQuery мають не один раз. Будьте уважні, якщо ви використовуєте багато файлів з декількома екземплярами jQuery. Просто залиште 1 екземпляр jQuery і ваш код запрацює.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery має бути першим:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

Причини для TypeError: $ (…) .modal не є функцією:

1. Сценарії завантажуються в неправильному порядку.
2. Кілька екземплярів jQuery

Рішення:

1. У випадку, якщо сценарій намагається отримати доступ до елемента, до якого ще не було досягнуто, ви отримаєте помилку. Завантаження залежить від jQuery, тому спочатку слід посилатися на jQuery. Отже, вас потрібно викликати jquery.min.js, а потім bootstrap.min.js, і подальша помилка модаля завантаження фактично є результатом того, що ви не включаєте JavaScript bootstrap перед викликом модальної функції. Модальний параметр визначений у bootstrap.js, а не в jQuery. Тому сценарій повинен бути включений у такий спосіб

      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
      <script type="text/javascript" src="js/bootstrap.js"></script>

2. У випадку, якщо існує декілька примірників jQuery, друга декларація jQuery заважає bootstrap.js правильно працювати. тому скористайтеся, jQuery.noConflict();перш ніж викликати модальне спливаюче вікно

   jQuery.noConflict();
   $('#prizePopup').modal('show');

   псевдонімами подій JQuery подобається .load, .unloadабо НЕ .errorрекомендується , так як JQuery 1.8.

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });

   АБО спробуйте відкрити модальне спливаюче вікно безпосередньо

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });

змінити порядок сценарію

Оскільки завантажувальний пристрій - плагін jquery, тому він вимагає виконання Jquery

Зміна заяви про імпорт працювала. З

import * as $ from 'jquery';

до:

declare var $ : any;

Біжи

npm i @types/jquery
npm install -D @types/bootstrap

у проекті, щоб додати типи jquery у ваш Angular Project. Після цього включайте

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

у вашому app.module.ts

Додайте

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

у вашому index.html безпосередньо перед тегом закриття тіла.

А якщо ви працюєте Angular 2-7, включіть " jquery " у поле типів файлу tsconfig.app.json.

Це дозволить видалити всю помилку 'modal' та '$' у вашому проекті Angular.

Я зустрічаюся з цією помилкою, коли інтегрую модальний завантажувач у кутовий.

Це моє рішення для вирішення цього питання.

Я поділяю, щодо кого хвилює.

Перший крок вам потрібно встановити jqueryі bootstrapза допомогою npmкоманди.

По-друге, вам потрібно додати declare var $ : any;компонент

І використовувати можна $('#myModal').modal('hide');за допомогою методу onSave ()

Демо https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Використання:

jQuery.noConflict();
$('#prizePopup').modal('toggle');

Проблема трапилася зі мною просто у виробництві лише тому, що я імпортував jquery за допомогою HTTP, а не HTTPS (а виробництво - HTTPS)

Я трохи запізнююся на вечірку, проте є важлива примітка:

Ваші сценарії можуть бути в потрібному порядку, але слідкуйте за будь-якими asyncsми в тезі сценарію (наприклад, цей)

<script type="text/javascript" src="js/bootstrap.js" async></script>

Це може спричинити проблему. Особливо, якщо ви маєте цей asyncнабір лише для виробничих середовищ, це може насправді розчарувати.

Напружився вирішити цю проблему, перевірив порядок завантаження і якщо jQuery двічі включався через пакет, але це, здається, не було причиною.

Нарешті виправили це, внісши наступні зміни:

(раніше):

$('#myModal').modal('hide');

(після):

window.$('#myModal').modal('hide');

Знайшов відповідь тут: https://github.com/ColorlibHQ/AdminLTE/isissue/685

Ви повинні включити:

bootstrap.min.css
jquery.min.js
bootstrap.min.js