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

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

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

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

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

:)

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

Эта ошибка на самом деле является результатом того, что вы не включили 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 или конфликтуя с $. Попробуйте удалить другие включенные скрипты и посмотрите, решит ли это проблему. В моем случае, после нескольких часов бесполезного поиска своего единственного кода, я удалил скрипты из бинарного шаблона поиска и сразу же обнаружил нарушающий скрипт.

Бегать

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.

По моему опыту, наиболее вероятно, что это произошло с конфликтами версий 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 перед загрузкой, все заработало.

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

$.ajax(...)

к

jQuery.ajax(...)

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

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

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

1. Укажите идентификатор для закрытой части модального / диалогового окна ("myModalClose" в примере ниже)

<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...

2. Создайте событие щелчка для указанной выше кнопки закрытия, используя этот идентификатор:

   document.getElementById("myModalClose").click();

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

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

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

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

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

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

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

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