it-swarm.com.ru

Ошибка типа: $ (...). Модальная не является функцией с bootstrap Модальной

У меня есть модальный bootstrap 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 

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

78
user61629

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

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

:)

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

139
adsurbum

Эта ошибка фактически является результатом того, что вы не включили javascript начального загрузчика перед вызовом функции modal. Модальный определяется в bootstrap.js, а не в jQuery. Также важно отметить, что bootstrap на самом деле нужен 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>
59
davetw12

После соединения вашего 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>
28
Rahul Mehra

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

5
Moslem7026

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

5
brad12s

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

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

в

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

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

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);
1
Jaison

В моем случае я использую фреймворк Rails и ​​дважды требую jQuery. Я думаю, что это возможная причина.

Вы можете сначала проверить файл app/assets/application.js. Если появляются jquery и bootstrap-sprockets, тогда нет необходимости во второй библиотеке require. Файл должен быть похож на это:

//= 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>

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

1
B Liu

Бежать

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.

Это удалит все ошибки 'modal' и '$' в вашем проекте Angular.

0
cyperpunk

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

$.ajax(...)

в

jQuery.ajax(...)

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

0
Cristian Merli

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

window.$('#modal-id').modal();
0
Zaman Afzal