TypeError: $ (…) .modal nie jest funkcją z bootstrap Modal

Mam modal bootstrap 2.32, który próbuję dynamicznie wstawić do kodu HTML innego widoku. Pracuję z Codeigniter 2.1. Po dynamicznym wstawieniu modalnego widoku częściowego bootstrap do widoku mam:

<div id="modal_target"></div>

jako docelowy element DIV do wstawienia. W widoku mam przycisk, który wygląda tak:

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

Mój JS ma:

$.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();
       }
    }
});

Przycisk widoku głównego to:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

Oto, co chciałbym przechowywać osobno jako częściowy widok:

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

Kiedy klikam przycisk, modal jest poprawnie wstawiany, ale pojawia się następujący błąd:

TypeError: $(...).modal is not a function 

Jak mogę to naprawić?

chcę tylko podkreślić, co powiedział mwebber w komentarzu:

sprawdź także dwukrotnie, czy jQuery nie jest dołączone

:)

to był problem dla mnie

Ten błąd jest w rzeczywistości wynikiem nieuwzględnienia javascript bootstrap przed wywołaniem modalfunkcji. Modal jest zdefiniowany w bootstrap.js, a nie w jQuery. Należy również zauważyć, że bootstrap faktycznie potrzebuje jQuery do zdefiniowania modalfunkcji, więc ważne jest, aby dołączyć jQuery przed dołączeniem javascript bootstrap. Aby uniknąć tego błędu, po prostu pamiętaj, aby dołączyć jQuery, a następnie javascript bootstrapa przed wywołaniem modalfunkcji. Zwykle wykonuję następujące czynności w moim tagu nagłówka:

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

Po połączeniu jquery i bootstrapu napisz swój kod tuż pod znacznikami Script jquery i 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>

Rozwiązałem ten problem w reakcji, używając go w ten sposób.

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

Sprawdź, czy jquerybiblioteka nie jest zawarta w html, która jest Ajaxładowana przez .remove <script src="~/Scripts/jquery[ver].js"></script>w TwoimAjaxUpdate/get_modal

Inną możliwością jest to, że jeden z innych skryptów, które dołączasz, powoduje problem, włączając JQuery lub powodując konflikt z $. Spróbuj usunąć inne dołączone skrypty i sprawdź, czy to rozwiązuje problem. W moim przypadku, po godzinach niepotrzebnego przeszukiwania mojego jedynego kodu, usunąłem skrypty w binarnym schemacie wyszukiwania i od razu odkryłem ten skrypty.

Biegać

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

w projekcie, aby dodać typy jQuery w projekcie Angular. Po tym dołącz

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

w swoim app.module.ts

Dodaj

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

w swoim index.html tuż przed zamykającym tagiem body.

A jeśli używasz Angulara 2-7, umieść „jquery” w polu typów w pliku tsconfig.app.json.

Spowoduje to usunięcie wszystkich błędów „modal” i „$” w Twoim projekcie Angular.

Z mojego doświadczenia wynika, że ​​najprawdopodobniej zdarzyło się to z konfliktami wersji jquery (używającej wielu wersji), aby rozwiązać problem, możemy użyć metody bez konfliktów, jak poniżej.

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

Rozwiązałem ten problem w Laravel, modyfikując poniższy wiersz w resources\assets\js\bootstrap.js

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

do

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

W moim przypadku używam frameworka rails i dwukrotnie wymagam jQuery. Myślę, że to możliwy powód.

Możesz najpierw sprawdzić plik app / asset / application.js. Jeśli pojawi się jquery i bootstrap-sprockets, nie ma potrzeby stosowania drugiej biblioteki. Plik powinien być podobny do tego:

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

Następnie sprawdź app / views / layouts / application.html.erb i usuń skrypt wymagający jquery. Na przykład:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Myślę, że czasami, gdy początkujący używają wielu przykładów kodu samouczka, spowoduje ten problem.

Dla mnie miałem //= require jquerypóźniej //= require bootstrap. Kiedy przeniosłem jquery przed bootstrap, wszystko działało.

Miałem ten sam problem. Wymiana pieniędzy

$.ajax(...)

do

jQuery.ajax(...)

nie działał. Ale potem odkryłem, że jQuery zostało dołączone dwukrotnie i usunięcie jednego z nich rozwiązało problem.

Inne odpowiedzi nie działają dla mnie w mojej aplikacji reag.js, więc użyłem do tego zwykłego JavaScript.

Poniższe rozwiązanie zadziałało:

1. Podaj identyfikator zamknięcia części okna dialogowego („myModalClose” w poniższym przykładzie)

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

2. Wygeneruj zdarzenie kliknięcia powyższego przycisku zamykającego, używając tego identyfikatora:

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

Możliwe, że możesz wygenerować to samo kliknięcie przycisku zamykania, używając również jQuery.

Mam nadzieję, że to pomoże.

Myślę, że powinieneś użyć w swoim przycisku

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

zamiast href powinno być kierowanie na dane

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

tylko upewnij się, że zawartość modalna jest już załadowana

Myślę, że problem polega na tym, że pokazanie modalu jest wywoływane dwukrotnie, jedno w wywołaniu ajax, które działa dobrze, powiedziałeś, że modal jest wyświetlany poprawnie, ale błąd prawdopodobnie pochodzi z akcji init na tym przycisku, który powinien obsługiwać modalne, tej akcji nie można wykonać ponieważ modal nie jest w tym czasie ładowany.