У меня есть модальный загрузчик 2.32, который я пытаюсь динамически вставить в HTML другого представления. Я работаю с Codeigniter 2.1. После динамической вставки модального частичного представления начальной загрузки в представление у меня есть:
<div id="modal_target"></div>
как целевой div для вставки. У меня есть кнопка, которая выглядит так:
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
В моем JS есть:
$.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();
}
}
});
Кнопка главного экрана:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Вот что я хотел бы сохранить отдельно как частичное представление:
<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>
Когда я нажимаю кнопку, модальное окно вставляется правильно, но появляется следующая ошибка:
TypeError: $(...).modal is not a function
Как я могу это исправить?
javascript
jquery
css
twitter-bootstrap
twitter-bootstrap-2
user1592380
источник
источник
jQuery(...).modal
. ваш jQuery может быть в режиме совместимости, также проверьте, не включен ли jQuery дважды.jQuery('#form-content').modal();
Ответы:
Я просто хочу подчеркнуть то, что mwebber сказал в комментарии:
:)
это было проблемой для меня
источник
Эта ошибка на самом деле является результатом того, что вы не включили javascript начальной загрузки перед вызовом
modal
функции. Модальный режим определяется в bootstrap.js, а не в jQuery. Также важно отметить, что начальной загрузке действительно нужен jQuery для определенияmodal
функции, поэтому очень важно, чтобы вы включили jQuery перед включением javascript начальной загрузки. Чтобы избежать ошибки, просто обязательно включите jQuery, а затем загрузите javascript перед вызовомmodal
функции. Обычно в теге заголовка я делаю следующее:<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>
источник
После связывания вашего jquery и начальной загрузки напишите свой код чуть ниже тегов Script jquery и 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>
источник
Я решил эту проблему в ответ, используя ее вот так.
window.$('#modal-id').modal();
источник
Убедитесь, что
jquery
библиотека не включена в html, которая загружается черезAjax
.remove<script src="~/Scripts/jquery[ver].js"></script>
в вашемAjaxUpdate/get_modal
источник
Другая возможность заключается в том, что один из других сценариев, которые вы включаете, вызывает проблему, также включая JQuery или конфликтуя с $. Попробуйте удалить другие включенные скрипты и посмотрите, решит ли это проблему. В моем случае, после нескольких часов бесполезного поиска своего единственного кода, я удалил скрипты из бинарного шаблона поиска и сразу же обнаружил нарушающий скрипт.
источник
Бегать
в проекте, чтобы добавить типы jquery в ваш проект Angular. После этого включить
import * as $ from "jquery"; import * as bootstrap from "bootstrap";
в вашем app.module.ts
Добавить
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
в вашем index.html непосредственно перед закрывающим тегом тела.
А если вы используете Angular 2-7, включите «jquery» в поле типов файла tsconfig.app.json.
Это удалит все ошибки 'модального' и '$' в вашем проекте Angular.
источник
По моему опыту, наиболее вероятно, что это произошло с конфликтами версий jquery (с использованием нескольких версий), для решения проблемы мы можем использовать метод без конфликтов, как показано ниже.
jQuery.noConflict(); (function( $ ) { $(function() { // More code using $ as alias to jQuery $('button').click(function(){ $('#modalID').modal('show'); }); }); })(jQuery);
источник
Я решил эту проблему в Laravel, изменив строку ниже в
resources\assets\js\bootstrap.js
window.$ = window.jQuery = require('jquery/dist/jquery.slim');
к
window.$ = window.jQuery = require('jquery/dist/jquery');
источник
В моем случае я использую структуру rails и дважды требую jQuery. Я думаю, это возможная причина.
Сначала вы можете проверить файл app / assets / application.js. Если появляются jquery и bootstrap-sprockets, то вторая библиотека не требуется. Файл должен быть похож на этот:
//= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap-sprockets //= require_tree .
Затем проверьте app / views / layouts / application.html.erb и удалите скрипт, требующий jquery. Например:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Я думаю, что иногда, когда новички используют несколько примеров кода учебника, это вызывает эту проблему.
источник
Для меня у меня было
//= require jquery
после//= require bootstrap
. Как только я переместил jquery перед загрузкой, все заработало.источник
Я была такая же проблема. Изменение
к
не работает. Но потом я обнаружил, что jQuery был включен дважды, и удаление одного из них устранило проблему.
источник
Другие ответы не работают для меня в моем приложении react.js, поэтому я использовал для этого простой JavaScript.
Ниже сработало решение:
Возможно, вы могли бы сгенерировать такой же щелчок по кнопке закрытия, также используя jQuery.
Надеюсь, это поможет.
источник
Я думаю, вам следует использовать в своей кнопке
<a data-toggle="modal" href="#form-content"
вместо href должен быть data-target
<a data-toggle="modal" data-target="#form-content"
только убедитесь, что модальный контент уже загружен
Я думаю, что проблема в том, что отображение модального окна вызывается дважды, один в вызове ajax, который работает нормально, вы сказали, что модальный режим отображается правильно, но ошибка, вероятно, связана с действием init на этой кнопке, которое должно обрабатывать модальное, это действие не может быть выполнено, потому что модальное окно в это время не загружается.
источник