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

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?

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

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>

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>

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

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

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

window.$('#modal-id').modal();

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.

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

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');

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

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

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.

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

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

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