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

Question

Ich habe eine Bootstrap 2.32 modal, die ich versuche, dynamisch in das HTML einer anderen Ansicht einzufügen. Ich arbeite mit Codeigniter 2.1. Folgende Dynamically inserting a bootstrap modal partial view into a view, ich habe:

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

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

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

Der Knopf der Hauptansicht ist:

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

Mein JS hat

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

Hier ist, was ich würde gerne getrennt als Teilansicht:

<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 klicken, wird der modale richtig eingesetzt, aber ich erhalte den folgenden Fehler:

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

Wie kann ich dieses Problem beheben?

Answer 1

Ich denke, Sie in Ihre Schaltfläche sollte Daten-Ziel sein

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

nur sicher sein, dass modalen Inhalt bereits geladen ist

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

statt href verwenden sollten

Ich denke, Problem ist, dass Modal wird zweimal aufgerufen, eine in Ajax Aufruf, das funktioniert gut, Sie sagten, modal wird korrekt angezeigt, aber Fehler p Robbly kommt mit Init-Aktion auf diese Schaltfläche, die mit modal umgehen sollte, kann diese Aktion nicht ausgeführt werden, weil modal zu diesem Zeitpunkt nicht geladen ist.

Answer 2

Dieser Fehler ist eigentlich das Ergebnis von Ihnen Bootstrap-Javascript vor dem Aufruf der modal Funktion nicht enthalten. 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 modal-Funktion zu definieren, also ist es wichtig, dass Sie jQuery einbeziehen, bevor Sie bootstrap's Javascript einbinden. Um den Fehler zu vermeiden, seien Sie sicher, dass Sie jQuery und dann das Javascript von bootstrap einbinden, bevor Sie die modal-Funktion aufrufen. Normalerweise mache ich folgende in meinem Header-Tag:

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

Answer 3

Ich möchte nur betonen, was mwebber im Kommentar sagte:

also check if jQuery is not included twice

:)

es das Problem für mich ist,

Answer 4

Überprüfen Sie, dass die jquery Bibliothek nicht in HTML enthalten ist, die über Ajax .removegeladen werdenin Ihrem AjaxUpdate/get_modal

Answer 5

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

Answer 6

In meinem Fall verwende ich Rails Framework und erfordern 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 ähnlich sein:

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

Dann überprüfen Sie app/views/layout/application.html.erb, und entfernen Sie das Skript für die Forderung jquery. Zum Beispiel:

Ich denke manchmal, wenn Anfänger verwenden mehrere Tutorial-Code-Beispiele wird dieses Problem verursachen.

Answer 7

Nach der Verknüpfung Ihrer jquery und Bootstrap schreiben Sie Ihren Code direkt unter den Skript-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>

Answer 8

hatte ich das gleiche Problem. Ändern

$.ajax(...) 

zu

jQuery.ajax(...) 

hat nicht funktioniert. Aber dann fand ich, dass jQuery zweimal enthalten war und das Entfernen eines von ihnen reparierte das Problem.

Answer 9

Nach meiner Erfahrung höchstwahrscheinlich sein mit jquery Version passiert (mit mehrere Version) Konflikte, für aussortieren des Problem, das wir eine nicht-Konflikt Methode wie unten verwenden können.

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

Answer 10

Ich löste dieses Problem in Laravel von modifing die Linie unten in resources\assets\js\bootstrap.js

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

zu

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