web-dev-qa-db-fra.com

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

J'ai un modal bootstrap 2.32 que je tente d'insérer dynamiquement dans le code HTML d'une autre vue. Je travaille avec Codeigniter 2.1. Après insertion dynamique d'une vue partielle modale bootstrap dans une vue , j'ai:

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

en tant que div cible pour l'insertion. J'ai un bouton à mon avis 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 tant que 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 le message d'erreur suivant s'affiche:

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

Comment puis-je réparer cela?

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-2
81
user61629

je veux juste souligner ce que mwebber a déclaré dans le commentaire:

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

:)

c'était le problème pour moi

144
adsurbum

Cette erreur résulte en fait du fait que vous n'avez pas inclus le javascript de bootstrap avant d'appeler la fonction modal. Modal est défini dans bootstrap.js et non pas jQuery. Il est également important de noter que bootstrap a réellement besoin de jQuery pour définir la fonction modal. Il est donc essentiel d'inclure jQuery avant d'inclure le javascript de bootstrap. Pour éviter l'erreur, assurez-vous d'inclure jQuery puis le code javascript de bootstrap avant d'appeler la fonction modal. Je fais habituellement 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>
63
davetw12

Après avoir lié votre jquery à 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>
29
Rahul Mehra

Vérifiez que la bibliothèque jquery non incluse dans le HTML qui se charge via Ajax .remove <script src="~/Scripts/jquery[ver].js"></script> dans votre AjaxUpdate/get_modal

6
Moslem7026

Une autre possibilité est que l’un des autres scripts que vous incluez soit la cause 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 de recherche inutile dans mon seul code, j'ai supprimé les scripts dans un modèle de recherche binaire et découvert le script incriminé immédiatement.

6
brad12s

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');
2
Radostin Stoyanov

D'après mon expérience, il est fort probable que cela se soit produit avec des conflits de version jquery (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);
2
Jaison

Dans mon cas, j'utilise Rails framework et 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, une seconde bibliothèque n'est pas nécessaire. Le fichier devrait ressembler à ceci:

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

Puis vérifiez app/views/layouts/application.html.erb et supprimez le script pour requérir 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, cela cause ce problème.

2
B Liu

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.

1
cyperpunk

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

1
Micah Rothenbuhler

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

$.ajax(...)

à

jQuery.ajax(...)

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

1
Cristian Merli

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

window.$('#modal-id').modal();
1
Zaman Afzal