Вопрос laravel: проблема с кнопкой ajax
Я использую ajax для laravel, при увеличении или уменьшении количества отображается «корзина успешно обновлена». Первый раз, когда я нажимаю кнопку вверх или вниз, как показано на рисунке ниже, не проблема. Сообщение отобразится, а затем исчезнет. Но когда я снова нажимаю кнопку вверх или вниз, сообщение также отображается, но больше не исчезает. Могу я узнать, как решить эту проблему?
Я поделюсь своим кодом прямо здесь ...
Вот код для файла контроллера: -
public function update(Request $request){
$qty = $request->newQty;
$rowId = $request->rowID;
Cart::update($rowId,$qty);
echo "Cart updated successfully!";
}
А вот и файл с лезвием: - Я также поместил ajax в файл лезвия:
<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.info(response);
$("#CartMsg").html(response);
}
});
});
@endforeach
});
</script>и здесь div в файле лезвия
<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>
Привет, извините за ошибку, я уже сделал часть обновления ... проверьте.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(response);
$("#CartMsg").html(response);
$('.alert-info').fadeIn().delay(5000).fadeOut(); // And add this (using the class or #CartMsg, depends on your html)
}
});
Где код, который вы используете, чтобы скрыть сообщение? Я вижу только один метод
.hide()при загрузке документа и не вижу кода для постепенного исчезновения. Это вообще не должно работать.