jQuery Ajax Post Bootstrap Popover Issue - php

Question

I have a e-commerce system. And i'm adding products to my cart like on screenshot
When i click to add to cart button. I'm showing a shopping cart notification which is bootstrap popover. The main problem is when i decide to another product i recived same notification.
I'm writing "Product A is added." When i do that in every different product adding it writes Product A is added. Adding i correct but notification is wrong.
Here is my jQuery Code...
$('.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);
}
});
});
And here is my 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

related issue: Twitter bootstrap js popover content doesn't update when data-content attribute is updated
Two changes are required to solve your problem:
Instead of .attr('data-content', data.queryresult), you should use .data('content', data.queryresult)
You need to use .popover('destroy') before updating the content, this prevents popover from getting lost with async processing.
Here is a sample code, I have used setTimeout to simulate the Ajax call:
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);
You can see it in action here: http://jsbin.com/UXAxEBE/1/
tip: when you have such type of error where you don't know whether the problem is at php or javascript side, you should try to console.log(data.queryresult) in your javascript to validate that php returns the correct content and that your problem is at client side.