2

Usando Bootstrap e criei um botão save no qual executa uma função específica selector(). Esta função será executada somente depois que salvar no banco, então mostrará uma alerta que desaparecerá em de uns instantes. No entanto está sendo executando somente uma vez e não mais. (sei que é algo extremamente simples)

function selector() {
  $(".alert").removeClass('hidden');
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
  }, 4000); 
}
body{
  padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="alert alert-success hidden" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Congratulations!</strong> Saved successfully!
</div>

<button style="margin: 10px" type="button" onClick="$(selector).click()" class="btn btn-primary" data-toggle="modal" data-target="#category">save</button>

Como tem que ser feito para que o alerta apareça toda vez for executado a função selector()?

2
  • Porque não usa toastr ? É bem mais fácil e prático. Commented 14/01/2017 às 16:44
  • @MatheusMiranda parece uma alternativa. vlw
    – viana
    Commented 14/01/2017 às 16:49

1 Resposta 1

3

Primeiro você está passando uma função chamada selector como um seletor onClick="$(selector).click()", e só funciona porque o jQuery tenta resolver o qualquer função como um callback para obter a string, ou seja está errado, bastaria isto:

 <button style="margin: 10px" type="button" onClick="selector()" class="btn btn-primary" data-toggle="modal" data-target="#category">save</button>

Tem dois problemas:

  1. .remove exclui o elemento, então não tem como exibir depois
  2. .fadeTo adiciona opacity (do CSS) igual a 0, quando iniciar a animação novamente é necessário setar como opacity: 1; para remover a transparencia, você pode usar o proprio fadeTo, ficará assim:

function selector() {
  $(".alert").fadeTo(1, 1).removeClass('hidden');
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(".alert").addClass('hidden');
    });
  }, 1000); 
}
body{
  padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="alert alert-success hidden" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Congratulations!</strong> Saved successfully!
</div>

<button style="margin: 10px" type="button" onClick="selector()" class="btn btn-primary" data-toggle="modal" data-target="#category">save</button>

Nota que se clicar muitas vezes pode dar erro, então use .stop:

function selector() {
  $(".alert").stop().fadeTo(1, 1).removeClass('hidden');
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(".alert").addClass('hidden');
    });
  }, 1000); 
}
body{
  padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="alert alert-success hidden" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Congratulations!</strong> Saved successfully!
</div>

<button style="margin: 10px" type="button" onClick="selector()" class="btn btn-primary" data-toggle="modal" data-target="#category">save</button>

Eu vou editar a resposta mais tarde, porque acho que sendo bootstrap-3 isso vai falha, já que a API deles usa o role e o target para o controle dos elementos

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 .