TypeError: $(...).modal ist nicht eine Funktion mit der bootstrap Modal
Ich habe eine bootstrap-2.32 modal, die ich versuche zum dynamischen einfügen in den HTML-von einer anderen Ansicht. Ich arbeite mit Codeigniter 2.1. Folgende Dynamisch einfügen eines bootstrap-modal partial view in eine viewdie ich habe:
<div id="modal_target"></div>
als Ziel für div einfügen. Ich habe eine Schaltfläche in meiner Ansicht, dass sieht aus wie:
<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();
}
}
});
Den button in der Hauptansicht ist:
<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 möchte, um zu speichern separat in einer 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 klicke, wird die modal ist richtig eingelegt, aber ich bekomme die folgende Fehlermeldung:
TypeError: $(...).modal is not a function
Wie kann ich dieses Problem beheben?
InformationsquelleAutor der Frage user61629 | 2014-11-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
ich möchte nur betonen, was mwebber sagte im Kommentar:
🙂
war das Thema für mich
InformationsquelleAutor der Antwort adsurbum
Dieser Fehler ist eigentlich das Ergebnis Sie nicht wie bootstrap javascript vor dem Aufruf der
modal
Funktion. Modal definiert ist bootstrap.js nicht jQuery. Es ist auch wichtig zu beachten, dass bootstrap auch tatsächlich braucht jQuery zu definieren, diemodal
Funktion, daher ist es wichtig, dass Sie jQuery vor, einschließlich bootstrap-javascript. Um den Fehler zu vermeiden, nur sicher sein, um jQuery-dann-bootstrap-javascript-rufen Sie vor dermodal
Funktion. Normalerweise mache ich Folgendes in meine header-tag:InformationsquelleAutor der Antwort davetw12
Überprüfen Sie, dass
jquery
Bibliothek nicht enthalten ist in der html, dass die Last überAjax
.entfernen<script src="~/Scripts/jquery[ver].js"></script>
in IhremAjaxUpdate/get_modal
InformationsquelleAutor der Antwort Moslem7026
Andere Möglichkeit ist, dass einer der anderen Skripte Ihr darunter, die das problem verursacht, indem Sie auch wie JQuery oder in Konflikt mit $. Versuchen Sie, Ihre anderen Skripten enthalten und sehen, ob es das Problem behebt. In meinem Fall, nach Stunden vergebliche Suche einen code habe ich entfernt-Skripts in eine binäre Suche Muster und entdeckt die problematische Skript sofort.
InformationsquelleAutor der Antwort brad12s
In meinem Fall, ich benutze rails framework und erfordern jQuery zweimal ein. Ich denke, das ist ein möglicher Grund.
Können Sie zunächst überprüfen, app/assets/application.js Datei. Wenn die jquery und bootstrap-Ritzel erscheint, dann gibt es keine Notwendigkeit für eine zweite Bibliothek erfordern. Die Datei sollte etwa wie folgt sein:
Dann check-app/views/layouts/application.html-Code.erb, und entfernen Sie das script für die jquery. Zum Beispiel:
Denke ich manchmal, wenn Neulinge mehrere Tutorials code-Beispiele wird dieses Problem verursachen.
InformationsquelleAutor der Antwort B Liu
Ich hatte das gleiche Problem.
Ändern
zu
nicht funktioniert. Aber dann habe ich festgestellt, dass jQuery enthalten war zweimal und entfernen Sie das problem behoben.
InformationsquelleAutor der Antwort Cristian Merli
In meiner Erfahrung, die meisten wahrscheinlich seine geschah mit jquery-version(mit mehreren Versionen) Konflikte, zum Sortieren, das Problem, das wir verwenden können, ein nicht-Konflikt-Methode wie unten.
InformationsquelleAutor der Antwort Jaison
Ich dieses Problem behoben in Laravel von modifing die Linie unten in
resources\assets\js\bootstrap.js
zu
InformationsquelleAutor der Antwort rado stoyanov
Denke ich, solltest du in deiner Schaltfläche
statt "href" sollte es data-target
nur sicher sein, dass modale Inhalte bereits geladen
Ich denke, dass problem ist, dass das zeigen von modal ist zweimal genannt, eine in ajax-call, das funktioniert, Sie sagte modal wird korrekt angezeigt, aber der Fehler kommt wahrscheinlich mit init-Aktion auf die Schaltfläche, , behandeln soll, modal, diese Aktion nicht ausgeführt, weil modal wird nicht geladen damals.
InformationsquelleAutor der Antwort Brzochod