Pregunta:
Fecha: 01-05-2019 16:56:44
(En Español)
archivo header.php
este es el jquery
este es el html donde voy a mostrar la alerta.
Manipular DOM [Resuelta]
hola amigos, tengo el siguiente problema quiero lanzar un alert de bootstrap con jquery pero no funciona tengo el siguiente codigo, es un div que va a contener el div del alert el cual lo inserto con append, tambien lo intente con html, innerHtml y con appendTo y nada. cual podra ser el error la referencia en header esta bien por que ya lo cheque y si me funciona en el footer no tengo ninguna referencia todo lo tengo en el header se los muestro.archivo header.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>{$titulo}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/all.css">
<link rel="stylesheet" href="./css/panelAdmin.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/all.js"></script>
<script type="text/javascript" src="./js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="./js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
<script type="text/javascript" src="./js/sweetalert.min.js"></script>
</head>
este es el jquery
$("#form").bind("submit",function(){
// Capturamnos el boton de envío
var btnEnviar = $("#btn_guardar");
$.ajax({
type: $(this).attr("method"),
url: $(this).attr("action"),
data:$(this).serialize(),
beforeSend: function(){
btnEnviar.val("Enviando"); // Para input de tipo button
btnEnviar.attr("disabled","disabled");
},
complete:function(data){
btnEnviar.val("Guardar Registro");
btnEnviar.removeAttr("disabled");
},
success: function(data){
$('.alerta').append('<div class="alert alert-success">¡Felicidades!</div>');
$('alert').slideDown('slow');
setTimeout(function(){
$('alert').slideUp('slow');
},3000);
// $(".respuesta").html(data);
},
error: function(data){
$('.alerta').append('<div class="alert alert-danger">¡Felicidades error!</div>');
$('alert').slideDown('slow');
setTimeout(function(){
$('alert').slideUp('slow');
},3000);
//alert("Problemas al tratar de enviar el formulario");
}
});
return false;
});
este es el html donde voy a mostrar la alerta.
<div class="alerta"></div>Votos: 0 - Respuestas: 3 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 02-05-2019 06:37:24 Primero: Ten en cuenta que Bootstrap recomienda enfáticamente que los links .js deben ir al final del "body" conservando el siguiente orden:
link a JQuery link a Poppoer ó Bundle link a bootstrap
Segundo: Tener en cuenta que bootstrap en su documentación trae especificado los métodos a utilizar con JQuery para darle funcionalidad al alert
Tercero: No sabía que en ésta plataforma también se daba soporte o ayuda al Front !
Saludos y espero haberte ayudado. Votos: 0 - Link respuesta -
Fecha: 02-05-2019 07:31:41 Gracias Orlando por tu respuesta.
efectivamente asi los tenia pero decidi cambiarlos al header por que al parecer al final del body no me funcionaba el datatable de bootstrap.
creo que tendre que volver a revisar la documentacion de bootstrap. Votos: 0 - Link respuesta -
Fecha: 05-05-2019 08:16:03 Revisaste que la respuesta del AJAX entre en el success???
si es asi, tambien imprime el selector de alerta a ver si estas en el objeto correcto. de resto parece estar bien. Lo que me parace es que el AJAX no esta entrando en el Success Votos: 1 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
