Панель уведомлений только появляется

Question

У меня есть этот динамический c фрагмент кода. Это должно отправить запрос на PHP и получить ответ. Он должен fadeIn () и fadeOut () каждый раз, когда появляется новое уведомление. Он показывает ответ в виде панели уведомлений вверху страницы, однако постепенно появляется только один раз. Когда я отправлю запрос еще раз, ответ будет, но панель уведомлений больше не будет. Буду очень признателен, если кто-нибудь сможет мне с этим помочь. Вот мой код:

<script>
    function live_update(el) {
        var str = el.value ;
        var id  = el.id ;

        if (str.length==0) { 
        document.getElementById("live_update").innerHTML="";
        
        return;
      }

      if (window.XMLHttpRequest) 
      {
        xmlhttp=new XMLHttpRequest();
      }
      xmlhttp.onreadystatechange=function() {
        if (this.readyState==4 && this.status==200) {
          document.getElementById("live_update").innerHTML=this.responseText;
          
            $("#live_update").addClass("bg-warning text-center text-dark p-2 h5 mx-auto");
            $('#live_update').fadeOut(3000);
        }
      }
      xmlhttp.open("GET","profiles.php?act=live_update&u_key={u_key}&id="+id+"&q="+str,true);
      xmlhttp.send();
    }
</script>

Answer 1

Чтобы снова отобразить div live_update , вам нужно использовать метод fadeIn с div live_update для его видимости. Кроме того, вам необходимо удалить классы, которые вы добавили при первом отображении ответа. В противном случае при каждом ответе ajax он будет продолжать добавлять в div.

Попробуйте это.

        xmlhttp.onreadystatechange=function() {
        if (this.readyState==4 && this.status==200) {
          document.getElementById("live_update").innerHTML=this.responseText;
          
            $("#live_update").fadeIn("3000", function() {
            $(this).addClass("bg-warning text-center text-dark p-2 h5 mx-auto");
            });

            $("#live_update").fadeOut("3000", function() {
            $(this).removeClass("bg-warning text-center text-dark p-2 h5 mx-auto");
            });
         }
        }

Вы также можете использовать fadeToggle .