javascript - not - modal static bootstrap
TypeError: $(...).modal no es una función con Bootstrap Modal (13)
Compruebe que la biblioteca
jquery
no se incluye en html que se carga a través de
Ajax
.remove
<script src="~/Scripts/jquery[ver].js"></script>
en su
AjaxUpdate/get_modal
Tengo un bootstrap 2.32 modal que estoy tratando de insertar dinámicamente en el HTML de otra vista. Estoy trabajando con Codeigniter 2.1. Después de insertar dinámicamente una vista parcial modal de rutina de carga en una vista , tengo:
<div id="modal_target"></div>
como el objetivo div para la inserción. Tengo un botón en mi vista que se ve así:
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
Mi JS tiene:
$.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();
}
}
});
El botón de la vista principal es:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Esto es lo que me gustaría almacenar por separado como una vista parcial:
<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>
Cuando hago clic en el botón, el modal se inserta correctamente, pero aparece el siguiente error:
TypeError: $(...).modal is not a function
¿Cómo puedo arreglar esto?
Después de vincular jquery y bootstrap, escriba su código justo debajo de las etiquetas de script de jquery y 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>
En mi caso, uso el marco de rails y necesito jQuery dos veces. Creo que esa es una posible razón.
Primero puede verificar el archivo app / assets / application.js. Si aparece jquery y bootstrap-sprockets, entonces no es necesario que se requiera una segunda biblioteca. El archivo debería ser similar a esto:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
Luego verifique app / views / layouts / application.html.erb y elimine el script que requiere jquery. Por ejemplo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Creo que a veces, cuando los novatos usan múltiples ejemplos de código tutorial, causarán este problema.
En mi experiencia, lo más probable es que haya sucedido con los conflictos de la versión jquery (usando múltiples versiones), para solucionar el problema, podemos usar un método sin conflicto como se muestra a continuación.
jQuery.noConflict();
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
$(''button'').click(function(){
$(''#modalID'').modal(''show'');
});
});
})(jQuery);
Este error 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, no en jQuery.
También es importante tener en cuenta que bootstrap realmente necesita jQuery para definir la función
modal
, por lo que es vital que incluya jQuery antes de incluir el JavaScript de bootstrap.
Para evitar el error, asegúrese de incluir jQuery y luego el javascript de bootstrap antes de llamar a la función
modal
.
Usualmente hago lo siguiente en mi etiqueta de encabezado:
<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>
He resuelto este problema al reaccionar al usarlo así.
$.ajax(...)
Otra posibilidad es que uno de los otros scripts que incluyas esté causando el problema al incluir también JQuery o entrar en conflicto con $. Intente eliminar sus otros scripts incluidos y vea si soluciona el problema. En mi caso, después de horas de buscar innecesariamente mi código único, eliminé los scripts en un patrón de búsqueda binario y descubrí el script ofensivo de inmediato.
Para mí, tenía
//= require jquery
after
//= require bootstrap
.
Una vez que moví jquery antes de bootstrap, todo funcionó.
Resolví este problema en Laravel modificando la línea a continuación en
resources/assets/js/bootstrap.js
window.$ = window.jQuery = require(''jquery/dist/jquery.slim'');
a
window.$ = window.jQuery = require(''jquery/dist/jquery'');
Solo quiero enfatizar lo que dijo mwebber en el comentario:
también verifique si jQuery no se incluye dos veces
:)
fue el problema para mí
Supongo que deberías usarlo en tu botón
<a data-toggle="modal" href="#form-content"
en lugar de href debería haber un objetivo de datos
<a data-toggle="modal" data-target="#form-content"
solo asegúrate de que el contenido modal ya esté cargado
Creo que el problema es que mostrar modal se llama dos veces, una en llamada ajax, eso funciona bien, dijiste que modal se muestra correctamente, pero el error probablemente viene con la acción init en ese botón, que debería manejar modal, esta acción no se puede ejecutar, porque modal no se carga en ese momento.
Tuve el mismo problema. Cambiando
jQuery.ajax(...)
a
window.$(''#modal-id'').modal();
no funcionó. Pero luego descubrí que jQuery se incluyó dos veces y eliminar uno de ellos solucionó el problema.
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.