Bootstrap modal: n'est pas une fonction


108

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?


1
écrivez votre code de déclenchement modal dans la fonction de fenêtre prête
yugi

"$ (window) .load (function () {" m'a sauvé
khaled_webdev

1
En définissant l'instance JQuery deux fois, le problème se posera. <script src = "// code.jquery.com/jquery-1.11.0.min.js"> </script>
pragadeesh

Réponses:


169

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


2
J'ai toujours ce problème lorsque j'essaie d'exécuter le modal à l'aide des outils de développement Google.
Conteneur codé le

@CodedContainer Assurez-vous que $la fonction jQuery est. C'est probablement la querySelectorfonction (nommée $) qui est exposée par les outils de développement de Google Chrome.
Ionică Bizău

72

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>

merci pour ce point, j'ai rencontré ce problème et j'ai constaté que mon propre DataTable.min.js y avait importé des bibliothèques jquery, mais ma page l'importe à nouveau, c'est le problème racine qui l'a causé.
Alter Hu

Très bon indice, jquery npm était installé dans Aurelia et également chargé manuellement dans index.html. Merci!
IngoB

Dans un grand cadre sur lequel je travaille, avec une configuration horrible, jQuery est chargé dans certaines pages mais dans d'autres: après m'être cogné la tête plusieurs fois, je suis allé ici et j'ai lu la réponse @Nurp. J'ai sauvé ma journée.
Nineoclick

Le problème est que j'utilise une application qui a des dépendances sur une ancienne version de jquery et je ne suis pas autorisé à changer et il est importé plus tard à un moment donné! J'ai utilisé la dernière version de jquery puis bootstrap js, causant tous les problèmes!
heman123

C'était aussi mon problème. J'ai supprimé jquery de la section scripts dans angular.js et également supprimé "import * as $ from 'jquery'" du Typescript et tout a fonctionné.
Jens Mander

15

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>

14

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>

14

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 () {
          ...
    });

Merci, dans mon cas, je chargeais deux instances de jQuery.
Sanjay Achar

10

changer l'ordre du script

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


5

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

import * as $ from 'jquery';

à:

declare var $ : any;

4

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.





0

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.


Le code de la question montre clairement que (a) ils ne sont pas dans le bon ordre et (b) ils n'utilisent pas l'attribut async
Quentin

1
Je donne ma réponse parce que c'est une question fréquemment recherchée sur Google et que quelqu'un pourrait en profiter
Martin Shishkov

0

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


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.