Modalny bootstrap: nie jest funkcją

Mam modal na mojej stronie. Kiedy próbuję go wywołać podczas ładowania systemu Windows, wyświetla na konsoli błąd, który mówi:

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

To jest mój modalny kod 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>

A to jest mój JavaScript, z którym mogę go uruchomić po załadowaniu okna:

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

Jak mogę rozwiązać ten problem?

Masz problem z kolejnością skryptów. Załaduj je w tej kolejności:

<!-- 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>

Dlaczego to? Ponieważ Bootstrap JS zależy od jQuery :

Zależności wtyczek

Niektóre wtyczki i komponenty CSS zależą od innych wtyczek. Jeśli dołączasz wtyczki indywidualnie, upewnij się, że sprawdziłeś te zależności w dokumentach. Zwróć również uwagę, że wszystkie wtyczki zależą od jQuery (oznacza to, że jQuery musi znajdować się przed plikami wtyczek ).

To ostrzeżenie może być również wyświetlane, jeśli jQuery jest zadeklarowane więcej niż raz w kodzie. Druga deklaracja jQuery uniemożliwia poprawne działanie 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>

Problem jest spowodowany tym, że instancje jQuery występują więcej niż jeden raz. Uważaj, jeśli używasz wielu plików z wielokrotnymi wystąpieniami jQuery. Po prostu zostaw 1 instancję jQuery, a Twój kod będzie działał.

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

jQuery powinno być pierwszym:

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

Przyczyny błędu TypeError: $ (…) .modal nie jest funkcją:

1. Skrypty są ładowane w złej kolejności.
2. Wiele instancji jQuery

Rozwiązania:

1. W przypadku, gdy skrypt próbuje uzyskać dostęp do elementu, który nie został jeszcze osiągnięty, pojawi się błąd. Bootstrap zależy od jQuery, więc najpierw należy odwołać się do jQuery. Tak więc, musisz nazywać się jquery.min.js, a następnie bootstrap.min.js, a ponadto błąd modalny bootstrap jest w rzeczywistości wynikiem tego, że nie dołączasz javascript bootstrapa przed wywołaniem funkcji modalnej. Modal jest zdefiniowany w pliku bootstrap.js, a nie w jQuery. Więc skrypt powinien być zawarty w ten sposób

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

2. W przypadku, gdy istnieje wiele wystąpień jQuery, druga deklaracja jQuery uniemożliwia poprawne działanie bootstrap.js. więc skorzystaj z jQuery.noConflict();przed wywołaniem wyskakującego okienka modalnego

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

   aliasy zdarzeń jQuery podoba .load, .unloadalbo .errorprzestarzałe, ponieważ jQuery 1.8.

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

   LUB spróbuj bezpośrednio otworzyć wyskakujące okienko modalne

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

zmienić kolejność skryptu

Ponieważ bootstrap jest wtyczką jquery, więc wymaga Jquery do wykonania

Zmiana instrukcji importu zadziałała. Z

import * as $ from 'jquery';

do:

declare var $ : any;

Biegać

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

w projekcie, aby dodać typy jQuery w projekcie Angular. Po tym dołącz

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

w swoim app.module.ts

Dodaj

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

w swoim index.html tuż przed zamykającym tagiem body.

Jeśli używasz Angulara 2-7, umieść „ jquery ” w polu typów w pliku tsconfig.app.json.

Spowoduje to usunięcie wszystkich błędów „modal” i „$” w Twoim projekcie Angular.

Napotykam ten błąd podczas integracji modalnego bootstrapa w angular.

To jest moje rozwiązanie, aby rozwiązać ten problem.

Dzielę się, o kogo chodzi

Pierwszym krokiem musi zainstalować jqueryi bootstrapprzez npmkomendy.

Po drugie, musisz dodać declare var $ : any;komponent

I można użyć $('#myModal').modal('hide');metody onSave ()

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Posługiwać się:

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

Problem zdarzył się tylko w produkcji tylko dlatego, że zaimportowałem jquery z HTTP a nie HTTPS (a produkcja to HTTPS)

Trochę spóźniłem się na imprezę, ale jest ważna uwaga:

Twoje skrypty mogą być we właściwej kolejności, ale uważaj na wszelkie asyncznaki w tagu skryptu (w ten sposób)

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

To może być przyczyną problemu. Szczególnie jeśli masz ten asynczestaw tylko dla środowisk produkcyjnych, może to być naprawdę frustrujące.

Starałem się rozwiązać ten problem, sprawdziłem kolejność ładowania i czy jQuery został dołączony dwukrotnie poprzez sprzedaż wiązaną, ale to nie wydawało się być przyczyną.

Wreszcie naprawiono to, wprowadzając następującą zmianę:

(przed):

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

(po):

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

Znalazłem odpowiedź tutaj: https://github.com/ColorlibHQ/AdminLTE/issues/685

Musisz dołączyć:

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