It's a Race!

I am pretty sure I am creating a race but I do not know how to go about fixing it… any ideas?

cheers,


$('.add-items').live('click', function(evt) {
        if (evt.button != 0) return; // ignore right-click
        evt.preventDefault();
        
        var items = $(this).attr('href').substr(1).split(',');
        // now items is ['G400180', 'G400181']
        
        // Disable the link to prevent repeated orders
        $(this).attr('disabled','disabled');
        
        // Execute the orders using ajax
        var remaining_requests_cnt = items.length;
        for (var i = 0; i < items.length; i++) {
            $.ajax({
                url: '/cgi/cart.cgi?'+items[i],
                success: function() {
                    if (--remaining_requests_cnt == 0) {
    					top.location.href="http://www.feelgoodlightups.com/cgi/cart.cgi?viewcart";
					}
                },
                error: function() {
                    alert('Error occurred. Check the content of your cart.');
                    location.reload();
                },
            })
        }
    });

What makes you think you have a problem?

When I test it, only one of the items is being added to the cart. the weird thing is once the cart has a item in it, the code works fine. It is only on the initial click…

Maybe your serverside script is creating multiple carts and identifying them by setting cookies. I would view the http headers to see the data going to, and coming from that script.

I think that is what is happening, and that the best option for me it to by pass a single request and wait for the response before it makes the second request. But I am not sure how to write it correctly.

Here is the link.
Only view the wall art section, this section has 2 items adding to cart.
http://www.feelgoodlightups.com/flash/index.html

You should find out the problem before trying to fix it.

You can view the http headers with an addon. For example, using firefox, try the live http headers plugin.

If you find set-cookie headers with different values, like, different session id’s for example, that would be your problem.

alright, I get 2 diff cart ids.

cartid = 59281; path=/
cartid = 59282; path=/

so it is creating 2 separate carts how can i fix this?

Yup.

Here’s the logic to send the requests sequentially.


var items = $(this).attr('href').substr(1).split(',');
function mySuccess() {
    if (items.length > 0) {
        addItemToCart(items.pop());
    } else {
        top.location.href = 'foo';
    }
}
function addItemToCart(itemId) {
    //send the ajax request for itemId
    // the success function should be mySuccess
}



I know I am screwing this up… Can you let me know what I am doing wrong?

$('.add-items').live('click', function(evt) {
        if (evt.button != 0) return; // ignore right-click
        evt.preventDefault();
        
        var items = $(this).attr('href').substr(1).split(',');
			function mySuccess() {
    		if (items.length > 0) {
        	addItemToCart(items.pop());
   			} else {
       		 top.location.href = 'http://www.feelgoodlightups.com/cgi/cart.cgi?viewcart';
    		}
		}
			function addItemToCart(itemId) {
   			// Disable the link to prevent repeated orders
       		$(this).attr('disabled','disabled');
		
			$.ajax({
                url: '/cgi/cart.cgi?'+items[i],
                mySuccess: function() {
                    if (--remaining_requests_cnt == 0) {
    					top.location.href="http://www.feelgoodlightups.com/cgi/cart.cgi?viewcart";
					}
                },
                error: function() {
                    alert('Error occurred. Check the content of your cart.');
                    location.reload();
                },
            })
		}
    });

            $.ajax({ 
                url: '/cgi/cart.cgi?'+itemId, 
                success: mySuccess, 
                error: function() { 
                    alert('Error occurred. Check the content of your cart.'); 
                    location.reload(); 
                }, 
            })

Then you need to start the process. I would just manually call mySuccess() to get it going.

its still not working for me, ideas?
thanks for helping me out on this, i really appreciate it.

$('.add-items').live('click', function(evt) {
        if (evt.button != 0) return; // ignore right-click
        evt.preventDefault();
        
        var items = $(this).attr('href').substr(1).split(',');
			function mySuccess() {
    		if (items.length > 0) {
        	addItemToCart(items.pop());
   			} else {
       		 top.location.href = 'http://www.feelgoodlightups.com/cgi/cart.cgi?viewcart';
    		}
		}
			function addItemToCart(itemId) {
   			// Disable the link to prevent repeated orders
       		$(this).attr('disabled','disabled');
		
			$.ajax({ 
                url: '/cgi/cart.cgi?'+itemId, 
                success: mySuccess, 
                error: function() { 
                    alert('Error occurred. Check the content of your cart.'); 
                    location.reload(); 
                }, 
            })
		}
    });
<a href="#G400180,G410001" class="add-items"><img src="images/cart.png" alt="add to cart" /></a>