Ajax, сначала появляется старое значение и только потом новое

Question

У меня есть Session::flash, которые используются, как уведомления (bootstrap toasts) от добавлении товара в корзину:

@if(Session::has('add-product'))
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center">
 <div class="toast fixed-top" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
  <div class="toast-header bg-success">
   <span class="mr-auto notif_text"></span>
   <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
   </button>
  </div>
 </div>
</div>
@endif

CartController в котором обрабатываются Session:flash:

public function addCart(Request $request, $id){
    $product = Product::find($id);
    $oldCart = Session::has('cart') ? Session::get('cart') : NULL;
    $cart = new Cart($oldCart);
    $cart->add($product, $product->id);

    $request = Session::put('cart', $cart);

    Session::flash('add-product', $product->name);

    return response()->json([
         'total_quantity' => Session::has('cart') ? Session::get('cart')->totalQty : '0',
         'notif_text' => 'Product' . Session::get('add-product', $product->name) . 'added to cart'
     ]);
  }

Ajax запрос:

$(document).ready(function() {
$('.product-icon-container').find('.ajaxcartadd').click(function (event){
event.preventDefault();
$('.toast').toast('show');
$.ajax({
url: $(this).attr('href'),
dataType: 'JSON',
success: function(response) {
$('.prodcount').html(response.total_quantity);
$('.notif_text').html(response.notif_text);//!!!Здесь подгружается текст уведомления!!!
}
});
return false;
});
});

У мой вопрос: Как сделать, чтобы старое значение не подгружалось, а подгружалось сразу новое? Сделать может какую то задержку перед выводом или что то еще?

Сейчас это работает так:

И примерно через секунду появляется новое значение:

Как это можно исправить?

Заранее спасибо!

Answer 1

Решение для моего случая, может быть кому то пригодится:

Причиной было то, что добавление товара происходит когда у ajax запроса статус success (именно там находится обработчик нажатий на кнопку "Добавить в корзину").

Для уведомлений я использую bootstrap toasts, которые включаются следующим образом:

$('.toast').toast('show');

И так как включение уведомление находилось вне ajax запроса, то и получалось, что старое значение либо вообще пустое значение не подгружалось как нужно.

Решением стало перенести включение уведомлений внутрь ajax запроса:

$(document).ready(function() {
  $('.product-icon-container').find('.ajaxcartadd').click(function(event) {
    event.preventDefault();
    $.ajax({
      url: $(this).attr('href'),
      dataType: 'JSON',
      success: function(response) {
        $('.prodcount').html(response.total_quantity);
        $('.notif_text').html(response.notif_text); //!!!Здесь загружает текст уведомлений!!!
        $('.toast').toast('show');//!!!Я переместил его сюда!!!
      }
    });
    return false;
  });
});

Но есть один нюанс, который я понял только сейчас. Flash сообщения не всегда загружаются асинхронно, так как они зависят от сессии (если я правильно понял), и если ваш пользователь заходит на сайт впервые, они не будут работать. Поэтому стоит выводить сообщения без них:

Bootstrap toasts:

<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center">
 <div class="toast fixed-top" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
  <div class="toast-header bg-success">
   <span class="mr-auto notif_text"></span>
   <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
   </button>
  </div>
 </div>
</div>

CartController:

public function addCart(Request $request, $id){
    $product = Product::find($id);
    $oldCart = Session::has('cart') ? Session::get('cart') : NULL;
    $cart = new Cart($oldCart);
    $cart->add($product, $product->id);

    $request = Session::put('cart', $cart);

    return response()->json([
         'total_quantity' => Session::has('cart') ? Session::get('cart')->totalQty : '0',
         'notif_text' => 'Product' . $product->name . 'added to cart'
     ]);
  }

БЛОГ НА HUSL

Ajax, сначала появляется старое значение и только потом новое

Ответы (1 шт):