Multiples Bootstrap Alerts

Navigation
4

I'm trying to create a default response using alerts do bootstrap my goal with a simple: 

    $(".alert").addClass('alert-success').text('Configurações salvas com sucesso.');

I choose the class alert-success and enter a text in the alert.

When in the same button click and in this should show a warning because the person did not fill a field for example I use: 

   $(".alert").addClass('alert-warning').text('Selecione  um Banco/Empresa Por favor.');

The 1st problem comes because the class alert-success is already inserted in the gift and in that case I need to remove it like this: 

 if($(".alert").hasClass('alert-success')){
        $(this).removeClass('alert-success');
 }

Verify that the class exists and remove.

So every time I'm going to add a new message I have to check if the class exists to remove it.

and by using close of alert it uses an attribute called data-dismiss that completely removes the element. I used the hide() method.

Alert Message

Would there be any way to simplify this whole process of alerts? 

$("#success").click(function() {
  if ($(".alert").hasClass('btn-warning')) {
    $(".alert").removeClass('btn-warning');
  }
  $(".alert").toggle().addClass('btn-success');
  $(".alert #resposta").text("This is a Success message!");
});

$("#warning").click(function() {
  $(".alert #resposta").text("This is a Warning message!");
  if ($(".alert").hasClass('btn-success')) {
    $(this).removeClass('btn-success');
  }
  $(".alert").toggle().addClass('btn-warning');
});

$("[data-hide]").on("click", function() {
  $("." + $(this).attr("data-hide")).hide();
});
<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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button class='btn btn-success' id='success'>success</button>
<br>
<br>
<button class='btn btn-warning' id='warning'>warning</button>
<br>
<br>


<div class="alert text-center" role="alert">
  <a href="#" class="close" data-hide="alert">&times;</a>
  <div id="resposta"></div>
</div>
    
asked by anonymous 14.07.2015 / 21:15

4 answers

3

I was able to solve this question by creating a function that receives the alert sucesso , atencao , erro and texto and give append in a div that I created ex: resposta , a function is responsible for eliminating the alert in click and also in close , and in alternating alerts I can clear alert using empty() : 

   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>
    
17.07.2015 / 19:01
2

Surely there are ... possible n forms, but based on your example, you can simply do this: 

function setTextInAlert(classe, message) {
    $('.alert').attr('class', classe);
    $('#resposta').text(message);
}

$(document).ready(function(){

   $('.botao').on('click', function(){

      var id = $(this).attr('id');

       switch(id) {
        case 'msg_01':
          setTextInAlert('alert btn-success text-center', 'Message Success!');
         break;
        case 'msg_02':
          setTextInAlert('alert btn-warning text-center', 'Message Warning!');
         break;
        case 'msg_03':
          setTextInAlert('alert btn-danger text-center', 'Message Danger!');
         break;
       }

   });
});

And in your html: 


<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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button class='btn btn-success botao' id="msg_01">success</button>
<br>
<br>
<button class='btn btn-warning botao' id="msg_02">warning</button>
<br>
<br>
<button class='btn btn-danger botao'  id="msg_03">error</button>

<div class="alert text-center" role="alert">
  <a href="#" class="close" data-hide="alert">×</a>
  <div id="resposta"></div>
</div>
    
14.07.2015 / 21:47
2

I also had this same problem when implementing these messages on my system. But I solved by applying $(this) before its closing. 

$("#success-alert").fadeTo(3000, 500).slideUp(500, function () {
      $(this).find("#success-alert").alert('close');
 });
    
04.02.2016 / 02:24
0

I know this is not a direct response, but I have been very successful in using Bootbox.js .

It is very useful in cases like this, where you want a message like alert() to appear but want to use bootstrap style. Bootbox.js is super-easy to use, although I have not found documentation in Portuguese.

The biggest advantage is that you do not need HTML at all - you can create it anytime you need it.

    
14.07.2015 / 21:55
What is this class __php_incomplete_class? Select with redirect