Ajax，旧值首先出现，然后是新值 [英] Ajax, the old value appears first and then the new one

问题描述

我有Session :: flash通知(引导吐司)，用于通知有关将商品添加到购物车的信息:

I have Session::flash notifications(bootstrap toasts), which is used to notify about adding a product to the cart:

@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

具有Session:flash的CartController:

CartController with 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); //!!!Here I load the notification text!!
      }
    });
    return false;
  });
});

我的问题是如何确保旧值不会出现，而新值会立即出现.

My question is how to make sure that the old value does not appear, but a new one appears immediately.

现在，它的工作方式如下: img_1

Now it works like this: img_1

然后大约1秒钟后，出现一条新通知: img_2

Then after about 1 second a new notification appears: img_2

如何解决?

推荐答案

首先删除已分配的值，然后将值分配给该类元素.

first remove already assigned value like this then assign value to that class element.

document.getElementsByClassName("prodcount").innerHTML = ""; // or $('.prodcount').innerHTML = "";
document.getElementsByClassName("notif_text").innerHTML = ""; // or $('.notif_text').innerHTML = "";
$('.prodcount').html(response.total_quantity);
$('.notif_text').html(response.notif_text);

这篇关于Ajax，旧值首先出现，然后是新值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！