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

98

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

user1592380
źródło
40
Sprawdź, czy zadziała jQuery(...).modal. Twój jQuery może być w trybie zgodności, sprawdź również dwukrotnie, czy jQuery nie jest uwzględniony.
mwebber
7
istnieje duże prawdopodobieństwo, że bootstrap.js nie zostanie załadowany przed próbą wywołania .modal ()
LJ Wadowski
1
mwebber - nie mam doświadczenia z js, Jak mam "Sprawdź, czy to zadziała z jQuery (...). modal." Jakoś zakładam w konsoli? Etsitra, bootstrap.js jest ładowany w nagłówku, zanim to wszystko się stanie.
user1592380
4
To znaczy: spróbujjQuery('#form-content').modal();
vp_arth
2
zamiast $ ('# form-content'). modal (); użyj jQuery ('# form-content'). modal ();
Himaan Singh

Odpowiedzi:

175

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

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

:)

to był problem dla mnie

adsurbum
źródło
1
Pamiętaj: pamiętaj, aby sprawdzić również pliki ajaxowe dla jQuery.
Vladimir Verleg
Zdarzyło się też, gdy wstawiłem niższą wersję jQuery w warunkowym dołączaniu dla ie8. <! - [jeśli lt IE 9]>
Jennifer Michelle
5
Upewnij się również, że żadna inna biblioteka nie zawiera pakietu jQuery we własnych plikach min (w niektórych przypadkach robi to DataTables)
gillytech
Nie zapomnij sprawdzić importu, na przykład: import '../jquery-3.3.1.js';
Reza
1
... a co się robi w takim przypadku? @gillytech
zadośćuczynienie za
87

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>
davetw12
źródło
Dziękuję @ davetw12, bardzo pomogło
WEshruth
Poprawna odpowiedź. :-)
Mr. Perfectionist
41

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>

Rahul Mehra
źródło
9

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

window.$('#modal-id').modal();
Zaman Afzal
źródło
7

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

Muzułmanin7026
źródło
7

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.

brad12s
źródło
5

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.

cyperpunk
źródło
3

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);
Jaison
źródło
3

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');
Radostin Stoyanov
źródło
jQuery slim nie zawiera modal ().
Ryan Griggs
2

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.

B Liu
źródło
2

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

Micah Rothenbuhler
źródło
1

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.

Levitica
źródło
0

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"
>
...
  1. 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.

Manohar Reddy Poreddy
źródło
-1

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.

Brzochod
źródło