Question

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>

Answer 1

.ajaxStart() is a global event. Each click you are binding another set of event handlers which causes 2 or more loading images to show up. You could try using the .one(types, function() { ... }) event binding to only fire that block of code once per click.

However, I would suggest looking at the $.ajax() callbacks beforeSend and complete as places to bind code for a specific ajax request (as opposed to every ajax request).

I usually use a pattern something like this:

$(".addToCart").click(function(e){

   // you need to use "var" to make sure $this is only available inside this function
   var $this=$(this);

   // avoid using $ on variables that aren't jQuery objects (this is just a string)
   var tableId=$this.closest('table').attr('id');

   // insert the element before starting the ajax call
   var $loadingElem = $("<img class='loader' src='images/loader.gif'>");
   $loadingElem.insertBefore($this);

   // call ajax with some data
   $.ajax({
     url: '...', data: {id: tableId}, // ....
     complete: function(xhr, textStatus) {
       // remove the element when the ajax completes
       $loadingElem.remove();
     }
   });
 });

Also, $($this) is a wasted call, it will just return $this