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

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?

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

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>

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>

Ü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

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.

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

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

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.

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

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

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.

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

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.

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

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

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.