Mam modal bootstrap 2.32, który próbuję dynamicznie wstawić do kodu HTML innego widoku. Pracuję z Codeigniter 2.1. Po dynamicznym wstawieniu modalnego widoku częściowego bootstrap do widoku mam:
<div id="modal_target"></div>
jako docelowy element DIV do wstawienia. W widoku mam przycisk, który wygląda tak:
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
Mój JS ma:
$.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();
}
}
});
Przycisk widoku głównego to:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Oto, co chciałbym przechowywać osobno jako częściowy widok:
<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>
Kiedy klikam przycisk, modal jest poprawnie wstawiany, ale pojawia się następujący błąd:
TypeError: $(...).modal is not a function
Jak mogę to naprawić?
javascript
jquery
css
twitter-bootstrap
twitter-bootstrap-2
user1592380
źródło
źródło
jQuery(...).modal
. Twój jQuery może być w trybie zgodności, sprawdź również dwukrotnie, czy jQuery nie jest uwzględniony.jQuery('#form-content').modal();
Odpowiedzi:
chcę tylko podkreślić, co powiedział mwebber w komentarzu:
:)
to był problem dla mnie
źródło
Ten błąd jest w rzeczywistości wynikiem nieuwzględnienia javascript bootstrap przed wywołaniem
modal
funkcji. Modal jest zdefiniowany w bootstrap.js, a nie w jQuery. Należy również zauważyć, że bootstrap faktycznie potrzebuje jQuery do zdefiniowaniamodal
funkcji, więc ważne jest, aby dołączyć jQuery przed dołączeniem javascript bootstrap. Aby uniknąć tego błędu, po prostu pamiętaj, aby dołączyć jQuery, a następnie javascript bootstrapa przed wywołaniemmodal
funkcji. Zwykle wykonuję następujące czynności w moim tagu nagłówka:<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>
źródło
Po połączeniu jquery i bootstrapu napisz swój kod tuż pod znacznikami Script jquery i 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>
źródło
Rozwiązałem ten problem w reakcji, używając go w ten sposób.
window.$('#modal-id').modal();
źródło
Sprawdź, czy
jquery
biblioteka nie jest zawarta w html, która jestAjax
ładowana przez .remove<script src="~/Scripts/jquery[ver].js"></script>
w TwoimAjaxUpdate/get_modal
źródło
Inną możliwością jest to, że jeden z innych skryptów, które dołączasz, powoduje problem, włączając JQuery lub powodując konflikt z $. Spróbuj usunąć inne dołączone skrypty i sprawdź, czy to rozwiązuje problem. W moim przypadku, po godzinach niepotrzebnego przeszukiwania mojego jedynego kodu, usunąłem skrypty w binarnym schemacie wyszukiwania i od razu odkryłem ten skrypty.
źródło
Biegać
w projekcie, aby dodać typy jQuery w projekcie Angular. Po tym dołącz
import * as $ from "jquery"; import * as bootstrap from "bootstrap";
w swoim app.module.ts
Dodaj
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
w swoim index.html tuż przed zamykającym tagiem body.
A jeśli używasz Angulara 2-7, umieść „jquery” w polu typów w pliku tsconfig.app.json.
Spowoduje to usunięcie wszystkich błędów „modal” i „$” w Twoim projekcie Angular.
źródło
Z mojego doświadczenia wynika, że najprawdopodobniej zdarzyło się to z konfliktami wersji jquery (używającej wielu wersji), aby rozwiązać problem, możemy użyć metody bez konfliktów, jak poniżej.
jQuery.noConflict(); (function( $ ) { $(function() { // More code using $ as alias to jQuery $('button').click(function(){ $('#modalID').modal('show'); }); }); })(jQuery);
źródło
Rozwiązałem ten problem w Laravel, modyfikując poniższy wiersz w
resources\assets\js\bootstrap.js
window.$ = window.jQuery = require('jquery/dist/jquery.slim');
do
window.$ = window.jQuery = require('jquery/dist/jquery');
źródło
W moim przypadku używam frameworka rails i dwukrotnie wymagam jQuery. Myślę, że to możliwy powód.
Możesz najpierw sprawdzić plik app / asset / application.js. Jeśli pojawi się jquery i bootstrap-sprockets, nie ma potrzeby stosowania drugiej biblioteki. Plik powinien być podobny do tego:
//= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap-sprockets //= require_tree .
Następnie sprawdź app / views / layouts / application.html.erb i usuń skrypt wymagający jquery. Na przykład:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Myślę, że czasami, gdy początkujący używają wielu przykładów kodu samouczka, spowoduje ten problem.
źródło
Dla mnie miałem
//= require jquery
później//= require bootstrap
. Kiedy przeniosłem jquery przed bootstrap, wszystko działało.źródło
Miałem ten sam problem. Wymiana pieniędzy
do
nie działał. Ale potem odkryłem, że jQuery zostało dołączone dwukrotnie i usunięcie jednego z nich rozwiązało problem.
źródło
Inne odpowiedzi nie działają dla mnie w mojej aplikacji reag.js, więc użyłem do tego zwykłego JavaScript.
Poniższe rozwiązanie zadziałało:
Możliwe, że możesz wygenerować to samo kliknięcie przycisku zamykania, używając również jQuery.
Mam nadzieję, że to pomoże.
źródło
Myślę, że powinieneś użyć w swoim przycisku
<a data-toggle="modal" href="#form-content"
zamiast href powinno być kierowanie na dane
<a data-toggle="modal" data-target="#form-content"
tylko upewnij się, że zawartość modalna jest już załadowana
Myślę, że problem polega na tym, że pokazanie modalu jest wywoływane dwukrotnie, jedno w wywołaniu ajax, które działa dobrze, powiedziałeś, że modal jest wyświetlany poprawnie, ale błąd prawdopodobnie pochodzi z akcji init na tym przycisku, który powinien obsługiwać modalne, tej akcji nie można wykonać ponieważ modal nie jest w tym czasie ładowany.
źródło