вопрос Laravel: проблема с кнопкой AJAX

Question

Я использую ajax для laravel, при увеличении или уменьшении которого будет отображаться «корзина успешно обновлена». Первый раз, когда я нажимаю кнопку вверх или вниз, как показано на рисунке ниже, это не проблема. Сообщение отображается, а затем исчезает. Но когда я снова нажимаю кнопку вверх или вниз, сообщение также отображает его, но больше не исчезает. Так я могу знать, как решить эту проблему?

Я поделюсь своим кодом прямо здесь ...

Вот код для файла контроллера: -

public function update(Request $request){
  $qty = $request->newQty;
  $rowId = $request->rowID;
  Cart::update($rowId,$qty);
  echo "Cart updated successfully!";
}

А вот файл блейда: - Я положил ajax на файл blade-сервера:

     <script>
        $(document).ready(function(){
            $("#CartMsg").hide();
            @foreach($data as $pro)
            $("#upCart{{$pro->id}}").on('change keyup', function(){
                var newQty = $("#upCart{{$pro->id}}").val();
                var rowID = $("#rowID{{$pro->id}}").val();
                $.ajax({
                    url:'{{url('/cart/update')}}',
                    data:'rowID=' + rowID + '&newQty=' + newQty,
                    type:'get',
                    success:function(response){
                        $("#CartMsg").show();
                        console.log(response);
                        $("#CartMsg").html(response);
                    }
                });
            });
            @endforeach
        });
    </script>

и вот div в файле blade

<div class="alert alert-info" id="CartMsg"></div>
<div class="cart-qty"> <span>Qty: </span>
    <input type="number" max="10" min="1"
     value="{{$pro->qty}}" class="qty-fill"
     id="upCart{{$pro->id}}">
</div>

Почти забыл, я забыл, что важная часть здесь - это исчезновение нашей части.

<script>
    $(document).ready(function(){
        $('.alert-info').fadeIn().delay(5000).fadeOut();
    });
</script>

Answer 1

Думаю, проблема в том, что вы смешиваете обе функции show () и hide () с fadeIn () и fadeOut (), и вы используете $ (document) .ready () для обработки чего-то, что может измениться. многократно. Впервые можно скрыть #CartMsg, но затем вы должны выполнить fadeIn () - fadeOut () в разделе «success» вызова ajax без повторного показа #CartMsg (fadeIn () выполнит эту работу).

$.ajax({
    url:'{{url('/cart/update')}}',
    data:'rowID=' + rowID + '&newQty=' + newQty,
    type:'get',
    success:function(response){
        //$("#CartMsg").show();                                  // Delete this
        console.log(response);
        $("#CartMsg").html(response);
        $('.alert-info').fadeIn().delay(5000).fadeOut();         // And add this (using the class or #CartMsg, depends on your html)
    }
});