How do I prevent the jQuery close function from destroying my message container?

Question

How do I prevent the jQuery close function from destroying my message container?

Navigation

#1 by (1 votes)

1

When I click the close icon of the error message, the Bootstrap javascript function simply destroys the #msg container that receives the error messages, preventing the next time an error occurs the container does not appear with the message because it no longer exists in the first close .

...msg='<buttontype="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 {
    ...

Question: How can I work around this problem?

jquery css twitter-bootstrap

asked by anonymous 08.11.2015 / 04:07

1 answer

Using Grid, Windows Phone C # Silverlight? Null object fields when trying to persist with JSF and JPA

score 1 · Accepted Answer

Let's say I have an html like this:

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

I could solve this problem by removing everything with empty () and then adding the alert string, in the following example you will see a function called msg that you only need to inform the alert and the text that you want to inform the user.

Example:

   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><linkhref="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><divclass="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>