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?
javascript
jquery
css
twitter-bootstrap
twitter-bootstrap-2
user1592380
quelle
quelle
jQuery(...).modal
. Ihre jQuery befindet sich möglicherweise im Kompatibilitätsmodus. Überprüfen Sie auch, ob jQuery nicht zweimal enthalten ist.jQuery('#form-content').modal();
Antworten:
Ich möchte nur betonen, was Mwebber im Kommentar gesagt hat:
:) :)
es war das Problem für mich
quelle
Dieser Fehler ist tatsächlich darauf zurückzuführen, dass Sie das Javascript von Bootstrap vor dem Aufrufen der
modal
Funktion 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 diemodal
Funktion 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 diemodal
Funktion aufrufen . Normalerweise mache ich in meinem Header-Tag Folgendes:quelle
Nachdem Sie Ihre jquery und Ihren Bootstrap verbunden haben, schreiben Sie Ihren Code direkt unter die Script-Tags von jquery und bootstrap.
quelle
Überprüfen Sie, ob die
jquery
Bibliothek nicht in HTML enthalten ist und überAjax
.remove<script src="~/Scripts/jquery[ver].js"></script>
in Ihre geladen wirdAjaxUpdate/get_modal
quelle
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.
quelle
Ich habe dieses Problem behoben, indem ich es so verwendet habe.
quelle
Lauf
im Projekt, um die Abfragetypen in Ihrem Winkelprojekt hinzuzufügen. Danach einschließen
in Ihrer app.module.ts
Hinzufügen
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.
quelle
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.
quelle
Ich habe dieses Problem in Laravel behoben, indem ich die folgende Zeile in geändert habe
resources\assets\js\bootstrap.js
zu
quelle
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:
Überprüfen Sie dann app / views / layouts / application.html.erb und entfernen Sie das Skript, um jquery zu benötigen. Beispielsweise:
Ich denke manchmal, wenn Neulinge mehrere Tutorial-Codebeispiele verwenden, wird dieses Problem verursacht.
quelle
Für mich hatte ich
//= require jquery
danach//= require bootstrap
. Nachdem ich jquery vor dem Bootstrap verschoben hatte, funktionierte alles.quelle
Ich hatte das gleiche Problem. Ändern
zu
funktioniert nicht. Aber dann stellte ich fest, dass jQuery zweimal enthalten war und das Entfernen eines davon das Problem behebt.
quelle
Andere Antworten funktionieren in meiner React.js-Anwendung nicht, daher habe ich dafür einfaches JavaScript verwendet.
Die folgende Lösung hat funktioniert:
Möglicherweise können Sie denselben Klick auf die Schaltfläche zum Schließen auch mit jQuery generieren.
Hoffentlich hilft das.
quelle
Ich denke, Sie sollten in Ihrem Knopf verwenden
statt href sollte es Daten-Ziel
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.
quelle