1

Quando eu clico no ícone fechar da mensagem de erro, a função do Bootstrap javascript simplesmente destrói o container #msg que recebe as mensagens de erro impedindo que da próxima vez que ocorra um erro o container não apareça com a mensagem porque ele deixou de existir no primeiro close.

inserir a descrição da imagem aqui

    ...
    msg         = '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
    msg         += '<strong>Atenção! </strong>Todos os campos precisam ser preenchidos.';

    // Verificando se todos os dados foram inseridos
    if((username == '' || username == null) || 
       (password == '' || password == null)){
        $('#msg').empty();
        $('#msg').removeClass('hidden').append(msg);
        return false;

    } else {
    ...

Pergunta: Como posso contornar este problema?

1 Resposta 1

1

Digamos que eu tenha um html assim:

<div id="resposta"></div>

Eu poderia resolver este problema de alerta removendo tudo com o empty() e depois adicionando a string do alerta,no exemplo a seguir você vera uma função chamada msg que você precisa apenas informar o alerta e o texto que você deseja informar ao usuário.

Exemplo:

   function msg(alerta, texto) {
     var resposta = '';
     $("#resposta").empty();
     if (alerta === 'sucesso') {
       resposta = "<div class='alert btn-success text-center' role='alert'>" +
         "<a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" +
         texto + "</div>";
     } else if (alerta === 'atencao') {
       resposta = "<div class='alert btn-warning text-center' role='alert'>" +
         "<a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" +
         texto + "</div>";
     } else if (alerta === 'erro') {
       resposta = "<div class='alert btn-danger text-center' role='alert'>" +
         "<a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" +
         texto + "</div>";
     }
     $("#resposta").append(resposta);

     $(".alert").click(function() {
       $(".alert").hide();
     });
   }

   $("#success").click(function() {
     msg('sucesso', 'Configuracoes salvas com sucesso.');
   });

   $("#warning").click(function() {
     msg('atencao', 'Preencha o campo XXXX por favor.');
   });
   $("#danger").click(function() {
     msg('erro', 'Error Tem alguma coisa errada que nao esta certa.');
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<br>
<br>
<div class="col-xs-4">
  <button class='btn btn-success btn-block' id='success'>success</button>
</div>
<div class="col-xs-4">
  <button class='btn btn-warning btn-block' id='warning'>warning</button>
</div>
<div class="col-xs-4">
  <button class='btn btn-danger btn-block' id='danger'>danger</button>
</div>
<br>
<br>
<br>
<div id="resposta"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .