close - modal javascript

Bootstrap modal: no es una función

Question

Tengo un modal en mi página. Cuando trato de llamarlo cuando se carga Windows, 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?

Answer 1

Cambiar la declaración de importación funcionó. De

import * as $ from ''jquery'';

a:

declare var $ : any;

Answer 2

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

Answer 3

El problema se debe a tener instancias 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>

Answer 4

Esta advertencia también se puede mostrar si jQuery se declara más de una vez en su código. La segunda declaración 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>

Answer 5

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

Sus scripts pueden estar en el orden correcto, pero tenga cuidado con cualquier async en su etiqueta de script (como esta)

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

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

Answer 6

Me encuentro con este error cuando integro bootstrap modal en angular.

Esta es mi solución para resolver este problema.

Comparto por quien se preocupe.

Primer paso, necesita instalar jquery y bootstrap mediante el comando npm .

En segundo lugar, debe agregar declare var $ : any; en componente

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

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

Answer 7

Tienes 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 ).

Answer 8

bootstrap.min.css
jquery.min.js
bootstrap.min.js
son imprescindibles para incluir. Estaba usando el modelo bootstrap

Answer 9

cambiar el orden del guión

Porque bootstrap es un complemento de jquery, por lo que requiere que Jquery se ejecute

Answer 10

correr

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

en el proyecto para agregar los tipos 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.

Answer 11

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>

Answer 12

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

1. Las secuencias de comandos se cargan en el orden incorrecto.
2. Múltiples instancias de jQuery

Soluciones:

1. En el caso, si un script intenta acceder a un elemento que aún no se ha alcanzado, recibirá un error. Bootstrap depende de jQuery, por lo que primero se debe hacer referencia a jQuery. Por lo tanto, debe llamarse jquery.min.js y luego bootstrap.min.js y, además, el error modal bootstrap es en realidad el resultado de no incluir el javascript de bootstrap antes de llamar a la función modal. El modo modal se define en bootstrap.js y no en jQuery. Entonces, el guión 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. entonces use jQuery.noConflict(); antes de llamar a la ventana emergente modal

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

   Alias ​​de eventos jQuery como .load , .unload o .error desuso 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 () {
         ...
   });