TypeError: $ (…) .modal ist keine Funktion mit Bootstrap Modal

92

Ich habe ein Bootstrap 2.32-Modal, das ich dynamisch in den HTML-Code einer anderen Ansicht einfügen möchte. Ich arbeite mit Codeigniter 2.1. Nach dem dynamischen Einfügen einer modalen Bootstrap-Teilansicht in eine Ansicht habe ich:

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

als Ziel div zum Einfügen. Ich habe eine Schaltfläche in meiner Ansicht, die wie folgt aussieht:

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

Mein JS hat:

$.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();
       }
    }
});

Die Schaltfläche der Hauptansicht lautet:

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

Folgendes möchte ich als Teilansicht separat speichern:

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

Wenn ich auf die Schaltfläche klicke, wird das Modal korrekt eingefügt, es wird jedoch die folgende Fehlermeldung angezeigt:

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

Wie kann ich das beheben?

user1592380
quelle
38
Überprüfen Sie, ob es funktioniert jQuery(...).modal. Ihre jQuery befindet sich möglicherweise im Kompatibilitätsmodus. Überprüfen Sie auch, ob jQuery nicht zweimal enthalten ist.
Mwebber
7
Es besteht eine große Wahrscheinlichkeit, dass bootstrap.js nicht geladen wird, bevor Sie versuchen, .modal ()
LJ Wadowski
1
mwebber - Ich habe keine Erfahrung mit js. Wie kann ich "überprüfen, ob es mit jQuery (...) funktioniert. modal". Ich nehme an, in der Konsole irgendwie? Etsitra, bootstrap.js wird in den Header geladen, bevor dies alles passiert.
Benutzer1592380
3
Es bedeutet: versuchenjQuery('#form-content').modal();
vp_arth
2
anstelle von $ ('# form-content'). modal (); benutze jQuery ('# form-content'). modal ();
Himaan Singh

Antworten:

168

Ich möchte nur betonen, was Mwebber im Kommentar gesagt hat:

Überprüfen Sie auch, ob jQuery nicht zweimal enthalten ist

:) :)

es war das Problem für mich

adsurbum
quelle
1
Denken Sie daran: Überprüfen Sie Ajax-Dateien auch auf jQuery.
Vladimir verleg
Auch passiert, wenn ich eine niedrigere Version von jquery in ein bedingtes Include für ie8 setze. <! - [if lt IE 9]>
Jennifer Michelle
5
Stellen Sie
Vergessen Sie nicht, Importe zu überprüfen, wie: import '../jquery-3.3.1.js';
Reza
1
... und was macht man in diesem Fall? @gillytech
Wiedergutmachung
76

Dieser Fehler ist tatsächlich darauf zurückzuführen, dass Sie das Javascript von Bootstrap vor dem Aufrufen der modalFunktion nicht eingeschlossen haben. Modal ist in bootstrap.js und nicht in jQuery definiert. Es ist auch wichtig zu beachten, dass Bootstrap tatsächlich jQuery benötigt, um die modalFunktion zu definieren. Daher ist es wichtig, dass Sie jQuery einschließen, bevor Sie das Javascript von Bootstrap einfügen. Um den Fehler zu vermeiden, müssen Sie nur jQuery und dann das Javascript von bootstrap einschließen, bevor Sie die modalFunktion aufrufen . Normalerweise mache ich in meinem Header-Tag Folgendes:

<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
quelle
Vielen Dank @ davetw12, es hat sehr geholfen
WEshruth
39

Nachdem Sie Ihre jquery und Ihren Bootstrap verbunden haben, schreiben Sie Ihren Code direkt unter die Script-Tags von jquery und 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
quelle
7

Überprüfen Sie, ob die jqueryBibliothek nicht in HTML enthalten ist und über Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>in Ihre geladen wirdAjaxUpdate/get_modal

Moslem7026
quelle
7

Eine andere Möglichkeit besteht darin, dass eines der anderen Skripte, die Sie einschließen, das Problem verursacht, indem es auch JQuery einschließt oder mit $ in Konflikt steht. Versuchen Sie, Ihre anderen enthaltenen Skripte zu entfernen, und prüfen Sie, ob das Problem dadurch behoben wird. In meinem Fall entfernte ich nach stundenlangem unnötigen Durchsuchen meines einen Codes Skripte in einem binären Suchmuster und entdeckte das fehlerhafte Skript sofort.

brad12s
quelle
6

Ich habe dieses Problem behoben, indem ich es so verwendet habe.

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

Lauf

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

im Projekt, um die Abfragetypen in Ihrem Winkelprojekt hinzuzufügen. Danach einschließen

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

in Ihrer app.module.ts

Hinzufügen

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

in Ihrer index.html kurz vor dem Body Closing Tag.

Wenn Sie Angular 2-7 ausführen, fügen Sie "jquery" in das Feld types der Datei tsconfig.app.json ein.

Dadurch werden alle Fehler von 'modal' und '$' in Ihrem Angular-Projekt entfernt.

Cyperpunk
quelle
3

Nach meiner Erfahrung ist es höchstwahrscheinlich bei Konflikten mit der jquery-Version (mit mehreren Versionen) aufgetreten. Um das Problem zu lösen, können wir eine konfliktfreie Methode wie die folgende verwenden.

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

Ich habe dieses Problem in Laravel behoben, indem ich die folgende Zeile in geändert habe resources\assets\js\bootstrap.js

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

zu

window.$ = window.jQuery = require('jquery/dist/jquery');
Radostin Stoyanov
quelle
jQuery slim enthält kein modal ().
Ryan Griggs
2

In meinem Fall verwende ich das Rails-Framework und benötige jQuery zweimal. Ich denke, das ist ein möglicher Grund.

Sie können zuerst die Datei app / assets / application.js überprüfen. Wenn die JQuery- und Bootstrap-Kettenräder angezeigt werden, ist keine zweite Bibliothek erforderlich. Die Datei sollte ungefähr so ​​aussehen:

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

Überprüfen Sie dann app / views / layouts / application.html.erb und entfernen Sie das Skript, um jquery zu benötigen. Beispielsweise:

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

Ich denke manchmal, wenn Neulinge mehrere Tutorial-Codebeispiele verwenden, wird dieses Problem verursacht.

B Liu
quelle
2

Für mich hatte ich //= require jquerydanach //= require bootstrap. Nachdem ich jquery vor dem Bootstrap verschoben hatte, funktionierte alles.

Micah Rothenbühler
quelle
1

Ich hatte das gleiche Problem. Ändern

$.ajax(...)

zu

jQuery.ajax(...)

funktioniert nicht. Aber dann stellte ich fest, dass jQuery zweimal enthalten war und das Entfernen eines davon das Problem behebt.

Levitica
quelle
0

Andere Antworten funktionieren in meiner React.js-Anwendung nicht, daher habe ich dafür einfaches JavaScript verwendet.

Die folgende Lösung hat funktioniert:

  1. Geben Sie eine ID für den geschlossenen Teil des Modals / Dialogs an ("myModalClose" im folgenden Beispiel).
<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...
  1. Generieren Sie mit der folgenden ID ein Klickereignis für die obige Schaltfläche zum Schließen:
   document.getElementById("myModalClose").click();

Möglicherweise können Sie denselben Klick auf die Schaltfläche zum Schließen auch mit jQuery generieren.

Hoffentlich hilft das.

Manohar Reddy Poreddy
quelle
-1

Ich denke, Sie sollten in Ihrem Knopf verwenden

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

statt href sollte es Daten-Ziel

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

Stellen Sie nur sicher, dass der modale Inhalt bereits geladen ist

Ich denke, das Problem ist, dass das Anzeigen von Modal zweimal aufgerufen wird, eines im Ajax-Aufruf, das funktioniert einwandfrei. Sie sagten, dass Modal korrekt angezeigt wird, aber der Fehler kommt wahrscheinlich mit der Init-Aktion auf dieser Schaltfläche, die Modal behandeln sollte. Diese Aktion kann nicht ausgeführt werden. weil modal zu diesem Zeitpunkt nicht geladen ist.

Brzochod
quelle