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?

godheaper
la source
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 ).

Ionică Bizău
la source
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>
Nurp
la source
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>
Juan Camilo Colmenares Rocha
la source
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>
dashtinejad
la source
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 () {
          ...
    });
Nɪsʜᴀɴᴛʜ ॐ
la source
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

Vitorino Fernandes
la source
5

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

import * as $ from 'jquery';

à:

declare var $ : any;
ranjeet8082
la source
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.

cyperpunk
la source
4

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

Hien Nguyen
la source
1

Utilisation:

jQuery.noConflict();
$('#prizePopup').modal('toggle');
Jerson Martínez
la source
0

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)

Patrick de l'équipe NDepend
la source
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.

Martin Shishkov
la source
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

Week-endHacker
la source
-1

Vous devez inclure:

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

J4GD33P 51NGH
la source