Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

75
Visualizações
Descartar alertas en bootstrap 5.1 y Ajax

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

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda