Bootstrap modal: n'est pas une fonction

J'ai un modal dans ma page. Lorsque j'essaye de l'appeler lorsque Windows se charge, il imprime une erreur sur la console qui dit:

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

Ceci est mon HTML modal:

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

Et voici mon JavaScript pour l'exécuter lorsqu'une fenêtre est chargée:

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

Comment puis-je résoudre ce problème?

Vous avez un problème dans l'ordre des scripts. Chargez-les dans cet ordre:

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

Pourquoi ça? Parce que Bootstrap JS dépend de jQuery :

Dépendances du plugin

Certains plugins et composants CSS dépendent d'autres plugins. Si vous incluez des plugins individuellement, assurez-vous de vérifier ces dépendances dans la documentation. Notez également que tous les plugins dépendent de jQuery (cela signifie que jQuery doit être inclus avant les fichiers du plugin ).

Cet avertissement peut également s'afficher si jQuery est déclaré plus d'une fois dans votre code. La deuxième déclaration jQuery empêche bootstrap.js de fonctionner correctement.

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

Le problème est dû au fait que des instances jQuery ont plusieurs fois. Faites attention si vous utilisez de nombreux fichiers avec plusieurs instances de jQuery. Laissez simplement 1 instance de jQuery et votre code fonctionnera.

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

jQuery doit être le premier:

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

Causes de TypeError: $ (…) .modal n'est pas une fonction:

1. Les scripts sont chargés dans le mauvais ordre.
2. Plusieurs instances jQuery

Solutions:

1. Au cas où, si un script tente d'accéder à un élément qui n'a pas encore été atteint, vous obtiendrez une erreur. Bootstrap dépend de jQuery, donc jQuery doit être référencé en premier. Donc, vous devez être appelé jquery.min.js puis bootstrap.min.js et de plus, l'erreur modale de bootstrap est en fait le résultat du fait que vous n'incluez pas le javascript de bootstrap avant d'appeler la fonction modale. Modal est défini dans bootstrap.js et non dans jQuery. Le script doit donc être inclus de cette manière

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

2. Dans le cas où il existe plusieurs instances de jQuery, la deuxième déclaration jQuery empêche bootstrap.js de fonctionner correctement. alors utilisez jQuery.noConflict();avant d'appeler le popup modal

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

   Les alias d'événement jQuery comme .load, .unloadou .errorobsolètes depuis jQuery 1.8.

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

   OU essayez d'ouvrir directement le popup modal

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

changer l'ordre du script

Parce que bootstrap est un plugin jquery, il nécessite donc Jquery pour s'exécuter

La modification de la déclaration d'importation a fonctionné. De

import * as $ from 'jquery';

à:

declare var $ : any;

Courir

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

dans le projet pour ajouter les types jquery dans votre projet angulaire. Après cela, incluez

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

dans votre app.module.ts

Ajouter

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

dans votre index.html juste avant la balise de fermeture du corps.

Et si vous exécutez Angular 2-7, incluez " jquery " dans le champ types du fichier tsconfig.app.json.

Cela supprimera toutes les erreurs de «modal» et «$» dans votre projet Angular.

Je rencontre cette erreur lors de l'intégration du bootstrap modal dans angular.

C'est ma solution pour résoudre ce problème.

Je partage pour qui le souci.

Première étape, vous devez installer jqueryet bootstrappar npmcommande.

Deuxièmement, vous devez ajouter un declare var $ : any;composant

Et utiliser peut utiliser la $('#myModal').modal('hide');méthode onSave ()

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

Utilisation:

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

Le problème m'est arrivé juste en production juste parce que j'ai importé jquery avec HTTP et non HTTPS (et la production est HTTPS)

Je suis un peu en retard à la fête, mais il y a une note importante:

Vos scripts sont peut-être dans le bon ordre, mais asyncfaites attention aux s dans votre balise de script (comme ceci)

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

Cela peut être à l'origine du problème. Surtout si vous avez cet asyncensemble uniquement pour les environnements de production, cela peut devenir vraiment frustrant à raisonner.

J'ai eu du mal à résoudre celui-ci, vérifié l'ordre de chargement et si jQuery était inclus deux fois via le regroupement, mais cela ne semblait pas être la cause.

Enfin corrigé en apportant la modification suivante:

(avant):

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

(après):

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

J'ai trouvé la réponse ici: https://github.com/ColorlibHQ/AdminLTE/issues/685

Vous devez inclure:

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