web-dev-qa-db-fra.com

Bootstrap modal: n'est pas une fonction

J'ai un modal dans ma page. Lorsque j'essaie de l'appeler lors du chargement de Windows, une erreur s'affiche sur la console et indique: 

$(...).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 quand 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?

javascriptjqueryhtmlbootstrap-modal
75
godheaper

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

Certains plugins et composants CSS dépendent d'autres plugins. Si vous incluez des plugins individuellement, assurez-vous de rechercher 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 de plugin).

113
Ionică Bizău

Cet avertissement peut également être affiché 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>
54
Nurp

Le problème est dû au fait que plusieurs instances de jQuery ont été utilisées. Faites attention si vous utilisez plusieurs fichiers avec plusieurs instances de jQuery. Laissez juste une instance de jQuery et votre code fonctionnera.

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

jQuery devrait être le premier:

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

changer l'ordre du script

Parce que bootstrap est un plugin jquery, il faut donc que Jquery soit exécuté

7
Vitorino fernandes

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. 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. JQuery doit donc être référencé en premier. Donc, vous devez être appelé jquery.min.js, puis bootstrap.min.js et plus loin le bootstrap L'erreur modale est en réalité le résultat de votre exclusion du javascript de bootstrap avant d'appeler la fonction modale. Modal est défini dans bootstrap.js et non dans jQuery. Donc, le script devrait ê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. S'il existe plusieurs instances de jQuery, la deuxième déclaration jQuery empêche bootstrap.js de fonctionner correctement. utilisez donc jQuery.noConflict(); avant d'appeler le popup modal

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

    les alias d'événements jQuery tels que .load, .unload ou .error sont obsolètes depuis jQuery 1.8.

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

    OU essayez d’ouvrir le popup modal directement

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

Je rencontre cette erreur lorsque intégrez modal bootstrap dans angular.

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

Je partage pour qui concerne.

La première étape consiste à installer la commande jquery et bootstrap avec la commande npm.

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

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

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

1
Hien Nguyen

Changer la déclaration d'importation a fonctionné. De

import * as $ from 'jquery';

à:

declare var $ : any;
1
ranjeet8082

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

0
Patrick from NDepend team

Courir

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

dans le projet pour ajouter les types jquery dans votre Angular Project. Après cela inclure

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

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

Vos scripts peuvent être dans le bon ordre, mais faites attention à tout asyncs dans votre balise script (comme ceci)

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

Cela pourrait être à l'origine du problème. Surtout si vous avez défini cet ensemble async uniquement pour les environnements de production, cela peut être très frustrant de raisonner.

0
Martin Shishkov