Message with Delay in JQuery

0

I have the following code:

if(oper == 1) {
  $("#op" + iddoc).html("<input type='button' onClick='AddExcDocCPS(\"" + idcontrato + "\", \"" + iddoc + "\", 0)' value='Excluir' class='BT_Vermelho'>");
  //alert("Documento Incluído com Sucesso!");
  $(".MsgRetorno").html("<P style='margin:0; color:green;'>Documento Incluído com Sucesso!</P>");
  $(".MsgRetorno").fadeOut(1000);
}
else
{
  $("#op" + iddoc).html("<input type='button' onClick='AddExcDocCPS(\"" + idcontrato + "\", \"" + iddoc + "\", 1)'  value='Incluir' class='BT_Verde'>");
  //alert("Documento Excluído com Sucesso!");
  $(".MsgRetorno").html("<P style='margin:0; color:red;'>Documento Excluído com Sucesso!</P>");
  $(".MsgRetorno").fadeOut(1000);
}

Is a list with delete button that includes include and vice versa. It turns out that it only appears once ... After fadeOut () it does not appear again when I click the buttons. I'm a beginner in JQuery.

Can anyone tell me why?

    
asked by anonymous 12.06.2018 / 19:57

1 answer

1

Use the callback of the fadeOut method. When you do fadeOut , div is permanently hidden. You need to empty it and restore it before making a new fadeOut .

Example based on your code:

idcontrato = iddoc = 1;
oper = 1;
function AddExcDocCPS(){

    // cancela se algum fade estiver ocorrendo
   $(".MsgRetorno")
   .stop(true, true)
   .html("")
   .show();

   
   if(oper == 1) {
      idcontrato = iddoc = 1;
      oper = 2;
     $("#op" + iddoc).html("<input type='button' onClick='AddExcDocCPS(\"" + idcontrato + "\", \"" + iddoc + "\", 0)' value='Excluir' class='BT_Vermelho'>");
     //alert("Documento Incluído com Sucesso!");
     $(".MsgRetorno")
     .html("<P style='margin:0; color:green;'>Documento Incluído com Sucesso!</P>")
     .fadeOut(1000, function(){ // callback
         $(this)  // seleciona a própria div
        .html("") // esvazia ela
        .show();  // mostra a div. Como ela está vazia, nada irá aparecer
     });
   }
   else
   {
      idcontrato = iddoc = 1;
      oper = 1;
     $("#op" + iddoc).html("<input type='button' onClick='AddExcDocCPS(\"" + idcontrato + "\", \"" + iddoc + "\", 1)'  value='Incluir' class='BT_Verde'>");
     //alert("Documento Excluído com Sucesso!");
     $(".MsgRetorno")
     .html("<P style='margin:0; color:red;'>Documento Excluído com Sucesso!</P>")
     .fadeOut(1000, function(){
         $(this)
        .html("")
        .show();
     });
   }
}

AddExcDocCPS();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="op1"></div>
<div class="MsgRetorno"></div>
    
12.06.2018 / 20:29