it-swarm.com.de

TypeError: $ (...). Modal ist keine Funktion mit bootstrap Modal

Ich habe ein bootstrap 2.32 modal, das ich versuche, dynamisch in den HTML-Code einer anderen Ansicht einzufügen. Ich arbeite mit Codeigniter 2.1. Nach Dynamisches Einfügen eines bootstrap Modale Teilansicht in eine Ansicht , ich habe:

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

als Ziel div zum Einfügen. Ich habe eine Schaltfläche in meiner Ansicht, die so 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 folgende Fehlermeldung angezeigt:

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

Wie kann ich das beheben?

81
user61629

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

144
adsurbum

Dieser Fehler ist in Wirklichkeit darauf zurückzuführen, dass Sie vor dem Aufrufen der Funktion modal das Javascript von bootstrap nicht mit einbeziehen. Modal ist in bootstrap.js und nicht in jQuery definiert. Es ist auch wichtig zu beachten, dass bootstrap jQuery tatsächlich benötigt, um die Funktion modal zu definieren, daher ist es wichtig, dass Sie jQuery einschließen, bevor Sie das Javascript von bootstrap einschließen Beziehen Sie jQuery und dann das Javascript von bootstrap ein, bevor Sie die Funktion modal aufrufen. Normalerweise führe ich in meinem Header-Tag Folgendes aus:

<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

Nachdem Sie Ihre jquery und bootstrap) verknüpft 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>
29
Rahul Mehra

Überprüfen Sie, ob die Bibliothek jquery nicht in HTML enthalten ist, die über Ajax .remove <script src="~/Scripts/jquery[ver].js"></script> In Ihrem AjaxUpdate/get_modal Geladen wird.

6
Moslem7026

Eine andere Möglichkeit ist, dass eines der anderen Skripte, die Sie einschließen, das Problem verursacht, indem Sie auch JQuery einschließen oder einen Konflikt mit $ verursachen. Versuchen Sie, die anderen enthaltenen Skripts zu entfernen, und überprüfen Sie, ob das Problem behoben ist. In meinem Fall habe ich nach stundenlangem unnötigem Durchsuchen meines Codes Skripte in einem binären Suchmuster entfernt und das fehlerhafte Skript sofort entdeckt.

6
brad12s

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

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

zu

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

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

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

In meinem Fall verwende ich das Rails Framework und benötige zweimal jQuery. 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 eine Abfrage durchzuführen. Zum Beispiel:

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

2
B Liu

Lauf

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

fügen Sie im Projekt die jquery-Typen in Ihr Angular Project ein

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

in Ihrem 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.

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

1
cyperpunk

Für mich hatte ich //= require jquery nach //= require bootstrap. Sobald ich vor dem Bootstrap auf jquery umgestiegen bin, hat alles funktioniert.

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 von ihnen das Problem behoben.

1
Cristian Merli

Ich habe dieses Problem gelöst, indem ich es so benutzte.

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