Hi All
I am trying to build a
shopping website with ajax. When a user clicks the "add to
cart" image. The little loading image will show next to the Add To
Cart Image. The first click works fine and the image showed as I expected. However, the second and the following clicks appends more images on the first loading image(2nd:add two loading images, 3rd: add three images..6 total images after 3 clicks). I did use ajaxStop and remove the first image...Not sure what's going on...Could use a help. Thanks a lot.
My javascript code
// add to
cart
$(".addToCart").click(function(e){
$this=$(this);
$tableId=$this.closest('table').attr('id');
$($this).prev().ajaxStart(function(){
$("<img class='loader' src='images/loader.gif'>").insertBefore($this);
});
$($this).prev().ajaxStop(function(){
$($this).prev().remove();
});
HTML
<table>
<tr>
<td width="146" align="right" valign="middle">
<br>
<span id="wasPrice"><?php echo $productPriceWas; ?></span>
<br>
<?php echo "$".$productPrice;?><br>**//I want my image here**<a class="addToCart" href="javascript:void(0);"><img src="images/addToCart.gif" alt="add To
Cart"/><a/> </td>
</tr>
</table>
