Estoy usando alertas de arranque 5.1 para mostrar mensajes específicos en una llamada Ajax. Además, me gustaría descartar la alerta si es necesario. Para eso, bootstrap permite tener un botón de descartar.
Aquí está mi php:
<div class="alert alert-warning alert-dismissible" role="alert" style="display:none;" id="message-response-given"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>Y los js relevantes para la llamada Ajax:
document.getElementById("message-response-given").innerHTML = res.message; $('#message-response-given').fadeIn();Esto muestra el mensaje PERO no el botón después de la llamada Ajax.
He leído lo siguiente (alertas de arranque, mismo enlace que el anterior):
Cuando se descarta una alerta, el elemento se elimina por completo de la estructura de la página. Si un usuario del teclado descarta la alerta usando el botón de cerrar, su enfoque se perderá repentinamente y, según el navegador, se restablecerá al inicio de la página/documento. Por esta razón, recomendamos incluir JavaScript adicional que escuche el evento closed.bs.alert y establezca programáticamente focus() en la ubicación más adecuada de la página. Si planea mover el foco a un elemento no interactivo que normalmente no recibe el foco, asegúrese de agregar tabindex="-1" al elemento.
Pero no tengo ni idea de como hacerlo.....
Está sobrescribiendo el botón html cuando configura:
document.getElementById("message-response-given").innerHTML = res.message; En su lugar, debe llamar a append y pasar el mensaje como parámetro. Como está utilizando jQuery, puede simplificar su secuencia de comandos a una sola línea encadenada:
$('#message-response-given').append(res.message).fadeIn();Por ejemplo:
$('#message-response-given').append("message").fadeIn(); <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="alert alert-warning alert-dismissible" role="alert" style="display:none;" id="message-response-given"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>