jQuery Ajax Post Bootstrap Popover Issue

Question

У меня есть система электронной коммерции. И я добавляю товары в свою корзину, как на снимке экрана

Когда я нажимаю, чтобы добавить в корзину кнопку. Я показываю уведомление корзины покупок, которое является загрузкой. Основная проблема заключается в том, когда я решаю другой продукт, я получил такое же уведомление.

Я пишу «Продукт А добавлен». Когда я делаю это в каждом другом продукте, добавляя его, добавляется Product A. Добавление i правильно, но уведомление неверно.

Вот мой JQuery код ...

$('.quick-add-cart').click(function(){ //Sepete Ekleme İşlemi yapıyoruz. 
    $('#cart-popover').attr('data-content',''); 
    productID = $(this).parents('.productbit').attr('id'); 
    $.ajax({ 
      type: "POST", 
      url: "ajax/add_to_cart.php", 
      dataType: 'json', 
      data: {    
       productID : productID 
      }, 
      error: function(jqXHR, exception) { 
       if (jqXHR.status === 0) { 
        alert('Bağlantı sağlanamadı.\n Lütfen internet bağlantınızı kontrol ediniz.'); 
      } else if (jqXHR.status == 404) { 
       alert('Sayfa bulunamadı. [404]'); 
      } else if (jqXHR.status == 500) { 
       alert('Sunucu Hatası [500].'); 
      } else if (exception === 'parsererror') { 
       alert('Requested JSON parse failed.'+ jqXHR.responseText); 
      } else if (exception === 'timeout') { 
       alert('Time out error.'); 
      } else if (exception === 'abort') { 
       alert('Ajax istemi durduruldu.'); 
      } else { 
       alert('Beklenmeyen Hata.\n' + jqXHR.responseText); 
      } 
      }, 
      success: function (data) { 
       if (data.insert_count > 0) { 
        cart_old_count = $('#cart_count').text(); 
        cart_new_count = parseInt(cart_old_count,10) + data.insert_count; 
         $('#cart_count').text(cart_new_count); 
       } 
        $('#cart-popover').attr('data-content',data.queryresult).popover('show'); 
        setTimeout(function() { 
         $('#cart-popover').popover('hide'); 
        }, 5000); 
       } 
          }); 
         }); 

А вот мой add_to_cart.php

require_once '../includes/class/class.cart.php'; 
     include_once '../locale.php'; 

     session_start(); 
     $C = new Cart(); 

//Sepete Ürün Ekliyoruz 
if (isset($_POST['productID'])){ 
    if (!isset($_SESSION['userid'])) { 
     $jsonData['queryresult'] = "Sepete Ekleme Yapabilmek için Bayi Girişi Yapmalısınız !"; 
    } else { 
     $productid = $_POST['productID']; 
     $product = $C->get_product_fields('product', $productid); 

     $jsonData['update_count'] = 0; 
     $jsonData['insert_count'] = 0; 

     $cart_error = FALSE; 

     if ($C->is_in_cart($productid)) { 
      if ($C->update_cart($productid)) 
       $jsonData['update_count'] += 1; 
      else { 
       $jsonData['queryresult'] = $C->cart_errors($productid); 
       $cart_error = TRUE; 
      } 
     } else { 
      if ($C->add_to_cart($productid)) 
       $jsonData['insert_count'] += 1; 
      else { 
       $jsonData['queryresult'] = $C->cart_errors($productid); 
       $cart_error = TRUE; 
      } 
     } 

     if ($cart_error === FALSE) { 
      if ($jsonData['insert_count'] == 1){ 
       $jsonData['queryresult'] = "Bir paket ".$product." eklendi."; 
      } 

      if ($jsonData['update_count'] == 1){ 
       $jsonData['queryresult'] = "Bir paket daha ".$product." eklendi."; 
      } 

      if ($jsonData['insert_count'] == 0 && $jsonData['update_count'] == 0){ 
       $jsonData['queryresult'] = "Ürünü sepete ekleme sırasında hata oldu."; 
      } 
     } 
    } 
     header('Content-type: application/json'); 
     echo json_encode($jsonData); 
} 

Answer 1

связанный с этим вопрос: Twitter bootstrap js popover content doesn't update when data-content attribute is updated

Два изменения необходимы, чтобы решить вашу проблему:

1. Вместо .attr('data-content', data.queryresult), вы должны использовать .data('content', data.queryresult)

2. Вы должны использовать .popover('destroy') перед обновлением контента, это предотвращает popover заблудиться с обработкой асинхронным.

Вот пример кода, я использовал SetTimeout для имитации вызова Ajax:

function displayPopover(msg) { 
    $('#cart-popover').popover('destroy'); 
    $('#cart-popover').data('content',msg).popover('show'); 
    setTimeout(function() { 
     $('#cart-popover').popover('hide'); 
    }, 5000); 
} 

// add first product to cart 
setTimeout(function() { displayPopover('product 1') }, 2000); 

// add second product to cart 
setTimeout(function() { displayPopover('product 2') }, 4000); 

Вы можете увидеть его в действии здесь: http://jsbin.com/UXAxEBE/1/

Подсказка: если у вас есть такой тип ошибки, если вы не знаете, находится ли проблема на стороне php или javascript, вы должны попробовать console.log(data.queryresult) в своем javascript, чтобы подтвердить, что php возвращает правильный контент и что ваша проблема находится на стороне клиента.