How to display message after add product to cart without refresh page

[theDoris]

I want to display this code in product-list.tpl after add product to cart without refreshing page:

 

{if ($cart->containsProduct($product.id_product, $product.id_product_attribute))}<div class="alert alert-info">{l s='Already in cart'}</div>{/if}

 

I use deafult theme from v1.6 I know I had to use ajax but I need some example for that.

[theDoris]

I tried some jquery to do that, so I make that:

<div id="div1">{if $added}Added{else}not added{/if}</div>

and try few code, for example:

$(document).on('click', '.ajax_add_to_cart_button', function() {
    $("#div1").load()       /*also $("#div1").load("#div1")*/
});

$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#div1").load($(this).attr("href")); /*and this:  $("#div1").load($(this).attr("href #div1"));*/
return false
});
});

But this is not work at all for me.

When I try this code:

$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$("#div1").html("result reloaded successfully");
});
});

It is work but no matter which product I add to cart only in first product is diplay info, also I try change html() to load() or refresh() but then is not working. What am I doing wrong?