Помилка типу: $ (...) .modal не є функцією із завантажувальним модулем Modal

У мене є модальний спосіб завантаження 2.32, який я намагаюся динамічно вставити в HTML іншого подання. Я працюю з Codeigniter 2.1. Після динамічної вставки модального часткового подання bootstrap у подання я маю:

<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 bootstrap перед викликом modalфункції. Модаль визначається в bootstrap.js, а не в jQuery. Важливо також зазначити, що bootstrap насправді потребує jQuery для визначення modalфункції, тому життєво важливо включити jQuery перед тим, як включити javascript bootstrap. Щоб уникнути помилки, просто не забудьте включити jQuery, а потім javascript bootstrap, перш ніж викликати 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 та bootstrap напишіть свій код трохи нижче тегів 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>

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

Інша можливість полягає в тому, що один із інших сценаріїв, які ви включаєте, викликає проблему, включаючи JQuery або конфліктуючи з $. Спробуйте видалити інші включені сценарії та переконайтеся, що це вирішує проблему. У моєму випадку, після кількох годин непотрібного пошуку мого єдиного коду, я видалив сценарії в двійковому шаблоні пошуку і відразу виявив скрипт, що порушує.

Я вирішив це питання у відповідь, використовуючи його таким чином.

window.$('#modal-id').modal();

Біжи

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

у проекті, щоб додати типи jquery у ваш Angular Project. Після цього включають

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.

Це видалить усі помилки 'modal' та '$' у вашому 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 framework і вимагаю jQuery двічі. Я думаю, що це можлива причина.

Спочатку можна перевірити файл app / assets / application.js. Якщо з'являється jquery та bootstrap-зірочки, тоді немає потреби в другій бібліотеці require. Файл повинен бути подібним до цього:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Потім перевірте app / views / layout / 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 був включений двічі, і видалення одного з них вирішило проблему.

Інші відповіді не працюють для мене в моєму додатку response.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 на цій кнопці, яка повинна обробляти модальну, ця дія не може бути виконана, тому що модальний на той час не завантажений.