Bootstrap modal: no es una función

108

Tengo un modal en mi página. Cuando intento llamarlo cuando se cargan las ventanas, imprime un error en la consola que dice:

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

Este es mi HTML modal:

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Y este es mi JavaScript para ejecutarlo cuando se carga una ventana:

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

¿Como puedo solucionar este problema?

ahijado
fuente
1
escriba su código de activación modal en la función de ventana lista
yugi
"$ (ventana) .load (function () {" me salvó
khaled_webdev
1
Al definir la instancia de JQuery dos veces, surgirá el problema. <script src = "// code.jquery.com/jquery-1.11.0.min.js"> </script>
pragadeesh

Respuestas:

169

Tiene un problema en el orden de los scripts. Cárguelos en este orden:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

¿Por qué esto? Porque Bootstrap JS depende de jQuery :

Dependencias de complementos

Algunos complementos y componentes CSS dependen de otros complementos. Si incluye plugins individualmente, asegúrese de comprobar si existen estas dependencias en los documentos. También tenga en cuenta que todos los complementos dependen de jQuery (esto significa que jQuery debe incluirse antes de los archivos del complemento ).

Ionică Bizău
fuente
2
Todavía tengo este problema cuando intento ejecutar el modal con las herramientas de desarrollo de Google.
Contenedor codificado
@CodedContainer Asegúrese de que $sea ​​la función jQuery. Lo más probable es que sea la querySelectorfunción (nombrada $) que está expuesta por las herramientas de desarrollo de Google Chrome.
Ionică Bizău
72

Esta advertencia también puede mostrarse si jQuery se declara más de una vez en su código. La segunda declaración de jQuery evita que bootstrap.js funcione correctamente.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Nurp
fuente
gracias por este punto, encontré este problema y descubrí que mi propio DataTable.min.js había importado bibliotecas jquery en él, pero mi página lo volvió a importar, ese es el problema raíz que lo causó.
Alter Hu
Muy buena pista, tenía jquery npm instalado en Aurelia y también cargado manualmente en index.html. ¡Gracias!
IngoB
En un marco grande en el que estoy trabajando, con una configuración horrible, jQuery está cargado en algunas páginas pero en otras: después de golpearme la cabeza un par de veces, fui aquí y leí la respuesta de @Nurp. Salvó mi día.
Nineoclick
¡El problema es que estoy usando una aplicación que tiene dependencias en la versión anterior de jquery y no puedo cambiar y se está importando más adelante en algún momento! He usado la última versión de jquery y luego bootstrap js, ¡causando todos los problemas!
heman123
Ese también era mi problema. Eliminé jquery de la sección de scripts en angular.js y también eliminé "import * as $ from 'jquery'" del TypeScript y todo funcionó.
Jens Mander
15

El problema se debe a tener instancias de jQuery más de una vez. Tenga cuidado si está utilizando muchos archivos con múltiples instancias de jQuery. Simplemente deje 1 instancia de jQuery y su código funcionará.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
Juan Camilo Colmenares Rocha
fuente
14

jQuery debería ser el primero:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Dashtinejad
fuente
14

Causas de TypeError: $ (…) .modal no es una función:

  1. Los scripts se cargan en el orden incorrecto.
  2. Varias instancias de jQuery

Soluciones:

  1. En caso de que, si un script intenta acceder a un elemento que aún no se ha alcanzado, obtendrá un error. Bootstrap depende de jQuery, por lo que se debe hacer referencia a jQuery primero. Por lo tanto, debe llamarse jquery.min.js y luego bootstrap.min.js y, además, el error modal de bootstrap es en realidad el resultado de que no incluye javascript de bootstrap antes de llamar a la función modal. Modal se define en bootstrap.js y no en jQuery. Entonces, el script debe incluirse de esta manera

       <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
       <script type="text/javascript" src="js/bootstrap.js"></script>
  2. En caso de que haya varias instancias de jQuery, la segunda declaración de jQuery evita que bootstrap.js funcione correctamente. así que utilícelo jQuery.noConflict();antes de llamar a la ventana emergente modal

    jQuery.noConflict();
    $('#prizePopup').modal('show');

    Alias ​​de eventos de jQuery como .load, .unloado en .errordesuso desde jQuery 1.8.

    $(window).on('load', function(){ 
          $('#prizePopup').modal('show');
    });

    O intente abrir la ventana emergente modal directamente

    $('#prizePopup').on('shown.bs.modal', function () {
          ...
    });
Nɪsʜᴀɴᴛʜ ॐ
fuente
Gracias, en mi caso estaba cargando dos instancias de jQuery.
Sanjay Achar
10

cambiar el orden del script

Debido a que bootstrap es un complemento de jquery, requiere que Jquery se ejecute

Fernandes vitorino
fuente
5

El cambio de declaración de importación funcionó. De

import * as $ from 'jquery';

a:

declare var $ : any;
ranjeet8082
fuente
4

correr

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

en el proyecto para agregar los tipos de jquery en su Proyecto Angular. Después de eso incluye

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

en su app.module.ts

Añadir

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

en su index.html justo antes de la etiqueta de cierre del cuerpo.

Y si está ejecutando Angular 2-7, incluya " jquery " en el campo de tipos del archivo tsconfig.app.json.

Esto eliminará todos los errores de 'modal' y '$' en su proyecto Angular.

cyperpunk
fuente
4

Encuentro este error cuando integro bootstrap modal en angular.

Esta es mi solución para resolver este problema.

Comparto por quien preocuparse.

Primer paso que necesita instalar jqueryy bootstrappornpm comando.

Segundo, necesitas agregar declare var $ : any; componente

Y el uso puede usar $('#myModal').modal('hide'); el método onSave ()

Demostración https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Hien Nguyen
fuente
1

Utilizar:

jQuery.noConflict();
$('#prizePopup').modal('toggle');
Jerson Martínez
fuente
0

El problema me sucedió solo en producción solo porque importé jquery con HTTP y no HTTPS (y la producción es HTTPS)

Patrick del equipo NDepend
fuente
0

Llego un poco tarde a la fiesta, sin embargo, hay una nota importante:

Es posible que sus scripts estén en el orden correcto, pero tenga cuidado con los asyncs en su etiqueta de script (como este)

<script type="text/javascript" src="js/bootstrap.js" async></script>

Esto podría estar causando el problema. Especialmente si tiene este asyncconjunto solo para entornos de producción, esto puede ser realmente frustrante para razonar.

Martin Shishkov
fuente
El código en la pregunta muestra claramente que (a) no están en el orden correcto y (b) no están usando el atributo asíncrono
Quentin
1
Estoy dando mi respuesta porque es una pregunta que se suele buscar en Google y alguien podría beneficiarse de ella
Martin Shishkov
0

Tuve problemas para resolver este, verifiqué el orden de carga y si jQuery se incluyó dos veces a través de la agrupación, pero esa no parecía ser la causa.

Finalmente lo arreglé haciendo el siguiente cambio:

(antes de):

$('#myModal').modal('hide');

(después):

window.$('#myModal').modal('hide');

Encontré la respuesta aquí: https://github.com/ColorlibHQ/AdminLTE/issues/685

WeekendHacker
fuente
-1

Debes incluir:

bootstrap.min.css
jquery.min.js
bootstrap.min.js

J4GD33P 51NGH
fuente