TypeError: $ (…) .modal не является функцией с начальной загрузкой Modal

99

У меня есть модальный загрузчик 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 

Как я могу это исправить?

user1592380
источник
40
Проверьте, будет ли работать с jQuery(...).modal. ваш jQuery может быть в режиме совместимости, также проверьте, не включен ли jQuery дважды.
mwebber
7
существует большая вероятность, что bootstrap.js не загружается до того, как вы попытаетесь вызвать .modal ()
LJ Wadowski
1
mwebber - У меня нет опыта работы с js. Как мне «Проверить, будет ли он работать с jQuery (...). modal». Предполагаю в консоли как-то? Etsitra, bootstrap.js загружается в заголовок до того, как все это произойдет.
user1592380
4
Значит: попробуйjQuery('#form-content').modal();
vp_arth
2
вместо $ ('# form-content'). modal (); используйте jQuery ('# form-content'). modal ();
Himaan Singh

Ответы:

175

Я просто хочу подчеркнуть то, что mwebber сказал в комментарии:

также проверьте, не включен ли jQuery дважды

:)

это было проблемой для меня

адсурбум
источник
1
Помните: обязательно проверьте файлы с именем ajax для jQuery.
Владимир Верлег
Также произошло, когда я поместил более низкую версию jquery в условное включение для ie8. <! - [if lt IE 9]>
Дженнифер Мишель
5
Также убедитесь, что никакие другие библиотеки не связывают jQuery в свои собственные min-файлы (в некоторых случаях это делают DataTables)
gillytech
Не забудьте проверить импорт, например: import '../jquery-3.3.1.js';
Reza
1
... и что делать в этом случае? @gillytech
возмещение
87

Эта ошибка на самом деле является результатом того, что вы не включили 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>
davetw12
источник
Спасибо @ davetw12, это очень помогло
WEshruth
Правильный ответ. :-)
Мистер Перфекционист
41

После связывания вашего 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>

Рахул Мехра
источник
9

Я решил эту проблему в ответ, используя ее вот так.

window.$('#modal-id').modal();
Заман Афзал
источник
7

Убедитесь, что jqueryбиблиотека не включена в html, которая загружается через Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>в вашемAjaxUpdate/get_modal

Мусульманин7026
источник
7

Другая возможность заключается в том, что один из других сценариев, которые вы включаете, вызывает проблему, также включая JQuery или конфликтуя с $. Попробуйте удалить другие включенные скрипты и посмотрите, решит ли это проблему. В моем случае, после нескольких часов бесполезного поиска своего единственного кода, я удалил скрипты из бинарного шаблона поиска и сразу же обнаружил нарушающий скрипт.

brad12s
источник
5

Бегать

npm i @types/jquery
npm install -D @types/bootstrap

в проекте, чтобы добавить типы 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.

Cyperpunk
источник
3

По моему опыту, наиболее вероятно, что это произошло с конфликтами версий jquery (с использованием нескольких версий), для решения проблемы мы можем использовать метод без конфликтов, как показано ниже.

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);
Джейсон
источник
3

Я решил эту проблему в Laravel, изменив строку ниже в resources\assets\js\bootstrap.js

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

к

window.$ = window.jQuery = require('jquery/dist/jquery');
Радостин Стоянов
источник
jQuery slim не включает modal ().
Райан Григгс,
2

В моем случае я использую структуру 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>

Я думаю, что иногда, когда новички используют несколько примеров кода учебника, это вызывает эту проблему.

Б Лю
источник
2

Для меня у меня было //= require jqueryпосле //= require bootstrap. Как только я переместил jquery перед загрузкой, все заработало.

Мика Ротенбюлер
источник
1

Я была такая же проблема. Изменение

$.ajax(...)

к

jQuery.ajax(...)

не работает. Но потом я обнаружил, что jQuery был включен дважды, и удаление одного из них устранило проблему.

Левитика
источник
0

Другие ответы не работают для меня в моем приложении react.js, поэтому я использовал для этого простой JavaScript.

Ниже сработало решение:

  1. Укажите идентификатор для закрытой части модального / диалогового окна ("myModalClose" в примере ниже)
<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...
  1. Создайте событие щелчка для указанной выше кнопки закрытия, используя этот идентификатор:
   document.getElementById("myModalClose").click();

Возможно, вы могли бы сгенерировать такой же щелчок по кнопке закрытия, также используя jQuery.

Надеюсь, это поможет.

Манохар Редди Поредди
источник
-1

Я думаю, вам следует использовать в своей кнопке

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

вместо href должен быть data-target

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

только убедитесь, что модальный контент уже загружен

Я думаю, что проблема в том, что отображение модального окна вызывается дважды, один в вызове ajax, который работает нормально, вы сказали, что модальный режим отображается правильно, но ошибка, вероятно, связана с действием init на этой кнопке, которое должно обрабатывать модальное, это действие не может быть выполнено, потому что модальное окно в это время не загружается.

Brzochod
источник