TypeError: $ (…) .modal n'est pas une fonction avec bootstrap Modal

93

J'ai un modal bootstrap 2.32 que j'essaye d'insérer dynamiquement dans le HTML d'une autre vue. Je travaille avec Codeigniter 2.1. Suite à l' insertion dynamique d'une vue partielle modale bootstrap dans une vue , j'ai:

<div id="modal_target"></div>

comme div cible pour l'insertion. J'ai un bouton dans ma vue qui ressemble à:

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

Mon JS a:

$.ajax({
    type    : 'POST', 
    url     : "AjaxUpdate/get_modal",
    cache   : false,
    success : function(data){ 
       if(data){
            $('#modal_target').html(data);

            //This shows the modal
            $('#form-content').modal();
       }
    }
});

Le bouton de la vue principale est:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

Voici ce que je voudrais stocker séparément en vue partielle:

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="user">User</label>
              <div class="controls">
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="old">Old password</label>
              <div class="controls">
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="new">New password</label>
              <div class="controls">
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="repeat">Repeat new password</label>
              <div class="controls">
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>

Lorsque je clique sur le bouton, le modal est inséré correctement, mais j'obtiens l'erreur suivante:

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

Comment puis-je réparer cela?

utilisateur1592380
la source
38
Vérifiez si cela fonctionnera avec jQuery(...).modal. votre jQuery est peut-être en mode de compatibilité, vérifiez également si jQuery n'est pas inclus deux fois.
mwebber
7
il y a de fortes chances que bootstrap.js ne soit pas chargé avant que vous n'essayiez d'appeler .modal ()
LJ Wadowski
1
mwebber - Je n'ai pas d'expérience avec js, Comment puis-je "Vérifier si cela fonctionnera avec jQuery (...). modal." Je suppose dans la console en quelque sorte? Etsitra, bootstrap.js est chargé dans l'en-tête avant que tout cela ne se produise.
user1592380
3
Cela signifie: essayezjQuery('#form-content').modal();
vp_arth
2
au lieu de $ ('# form-content'). modal (); utilisez jQuery ('# form-content'). modal ();
Himaan Singh

Réponses:

171

je veux juste souligner ce que mwebber a dit dans le commentaire:

vérifier également si jQuery n'est pas inclus deux fois

:)

c'était le problème pour moi

adsurbum
la source
1
N'oubliez pas: assurez-vous de vérifier également les fichiers appelés ajax pour jQuery.
Vladimir verleg
Cela s'est aussi produit lorsque j'ai mis une version inférieure de jquery dans un include conditionnel pour ie8. <! - [if lt IE 9]>
Jennifer Michelle
5
Assurez-vous également qu'aucune autre bibliothèque n'intègre jQuery dans ses propres fichiers min (DataTables le fait dans certains cas)
Gillytech
N'oubliez pas de vérifier les importations, comme: import '../jquery-3.3.1.js';
Reza
1
... et que fait-on dans ce cas? @gillytech
réparation
80

Cette erreur est en fait le résultat du fait que vous n'incluez pas le javascript de bootstrap avant d'appeler la modalfonction. Modal est défini dans bootstrap.js et non dans jQuery. Il est également important de noter que bootstrap a réellement besoin de jQuery pour définir la modalfonction, il est donc essentiel que vous incluiez jQuery avant d'inclure le javascript de bootstrap. Pour éviter l'erreur, assurez-vous simplement d'inclure jQuery puis le javascript de bootstrap avant d'appeler la modalfonction. Je fais généralement ce qui suit dans ma balise d'en-tête:

<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>
davetw12
la source
Merci @ davetw12, cela a beaucoup aidé
WEshruth
Bonne réponse. :-)
Mr. Perfectionist le
40

Après avoir lié votre jquery et votre bootstrap, écrivez votre code juste en dessous des balises Script de jquery et bootstrap.

$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Rahul Mehra
la source
7

Vérifiez cette jquerybibliothèque non incluse dans html qui se charge via Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>dans votreAjaxUpdate/get_modal

Musulman7026
la source
7

Une autre possibilité est que l'un des autres scripts que vous incluez soit à l'origine du problème en incluant également JQuery ou en conflit avec $. Essayez de supprimer vos autres scripts inclus et voyez si cela résout le problème. Dans mon cas, après des heures à rechercher inutilement mon code, j'ai supprimé les scripts dans un modèle de recherche binaire et découvert immédiatement le script incriminé.

brad12s
la source
7

J'ai résolu ce problème en réagissant en l'utilisant comme ça.

window.$('#modal-id').modal();
Zaman Afzal
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
3

D'après mon expérience, cela s'est probablement produit avec des conflits de version jquery (en utilisant plusieurs versions), pour résoudre le problème, nous pouvons utiliser une méthode sans conflit comme ci-dessous.

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);
Jaison
la source
3

J'ai résolu ce problème dans Laravel en modifiant la ligne ci-dessous dans resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

à

window.$ = window.jQuery = require('jquery/dist/jquery');
Radostin Stoyanov
la source
jQuery slim n'inclut pas modal ().
Ryan Griggs le
2

Dans mon cas, j'utilise le framework rails et j'ai besoin de jQuery deux fois. Je pense que c'est une raison possible.

Vous pouvez d'abord vérifier le fichier app / assets / application.js. Si jquery et bootstrap-sprockets apparaissent, alors il n'y a pas besoin d'une deuxième bibliothèque requise. Le fichier doit être similaire à ceci:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Ensuite, vérifiez app / views / layouts / application.html.erb et supprimez le script pour exiger jquery. Par exemple:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Je pense que parfois, lorsque les débutants utilisent plusieurs exemples de code de didacticiel, ce problème sera causé.

B Liu
la source
2

Pour moi, j'ai eu //= require jqueryaprès //= require bootstrap. Une fois que j'ai déplacé jquery avant le bootstrap, tout a fonctionné.

Micah Rothenbuhler
la source
1

J'ai eu le même problème. En changeant

$.ajax(...)

à

jQuery.ajax(...)

n'a pas marché. Mais ensuite, j'ai trouvé que jQuery était inclus deux fois et la suppression de l'un d'entre eux a résolu le problème.

Levitica
la source
0

Les autres réponses ne fonctionnent pas pour moi dans mon application react.js, j'ai donc utilisé du JavaScript simple pour cela.

La solution ci-dessous a fonctionné:

  1. Donnez un identifiant pour fermer une partie du modal / dialogue ("myModalClose" dans l'exemple ci-dessous)
<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...
  1. Générez un événement de clic sur le bouton de fermeture ci-dessus, en utilisant cet identifiant:
   document.getElementById("myModalClose").click();

Vous pourriez peut-être générer le même clic sur le bouton de fermeture, en utilisant également jQuery.

J'espère que cela pourra aider.

Manohar Reddy Poreddy
la source
-1

Je suppose que vous devriez utiliser dans votre bouton

<a data-toggle="modal" href="#form-content"    

au lieu de href, il devrait y avoir une cible de données

<a data-toggle="modal" data-target="#form-content"    

assurez-vous simplement que le contenu modal est déjà chargé

Je pense que le problème est que l'affichage de modal est appelé deux fois, un dans un appel ajax, cela fonctionne bien, vous avez dit que le modal est affiché correctement, mais l'erreur vient probablement avec l'action init sur ce bouton, qui devrait gérer modal, cette action ne peut pas être exécutée, car modal n'est pas chargé à ce moment-là.

Brzochod
la source