jQuery ajax issue

Question

Hi, I've been at this bit of code for a while, but am not sure what I'm doing wrong. Basically I want to create a loop that prints out all items in a cart. If I take the loop out, it prints the item just added, but when I add the loop in, it breaks.

I'm not too familiar with jQuery/JSAON, so if anyone could point out where I might be going wrong, that would be great.

(edit - full js files)

var ShoppCartAjaxHandler = function (cart) {
    (function($) {
     var display = $('#shopp-cart-ajax');
     display.empty().hide(); // clear any previous additions
     var item = $('<ul class="sidecart_list"></ul>').appendTo(display);
     $.each(cart.items, function() {
      $("<li></li>").html("<strong>"+this.quantity+"</strong>"+this.name).appendTo(item);
     });
     //$('<li></li>').html('<strong>'+cart.Item.quantity+'</strong> x '+cart.Item.name).appendTo(item);
     $('<li></li>').html('<strong>Subotal</strong> '+asMoney(cart.Totals.subtotal)).appendTo(item);
     $('<li></li>').html('<strong>Shipping</strong> '+asMoney(cart.Totals.shipping)).appendTo(item);
     $('<li></li>').html('<strong>Total</strong> '+asMoney(cart.Totals.total)).appendTo(item);
     if ($('#shopp-cart-items').length > 0) {
      $('#shopp-cart-items').html(cart.Totals.quantity);
      $('#shopp-cart-total').html(asMoney(cart.Totals.total));   
     } else {

      $('.widget_shoppcartwidget p.status').html('<p class="status_info"><strong><span id="shopp-cart-items">'+cart.Totals.quantity+'</span></strong> x <span id="shopp-cart-total">'+cart.Item.name+'</span></p><p class="status_info"><strong>Subtotal</strong> <span id="shopp-cart-subtotal">'+asMoney(cart.Totals.subtotal)+'</span></p><p class="status_info"><strong>Shipping</strong> <span id="shopp-cart-shipping">'+asMoney(cart.Totals.shipping)+'</span></p><p class="status_info"><strong>Total</strong> <span id="shopp-cart-total">'+asMoney(cart.Totals.total)+'</span></p>');

     }
     display.slideDown();
    })(jQuery) 
}

Answer 1

Please change your call to $.each as follows:

$.each(
        cart.items, 
        function()
        {
          $("<li></li>").html("<strong>" + this.Quantity + "</strong>" +
                              this.name).appendTo(item);
        }
      );

Answer 2

The following should work. Check out how each is called, and "this" refers to the items being iterated on. I also changed the variable "ul" to represent the list, so that it is clearer what is going on. Finally, make sure your cart looks like this:

var cart = { 
    items: [
     {quantity: 1, name: 'asjdfkj' },
     {quantity: 1, name: 'asjdfkj' },
     {quantity: 1, name: 'bkag' }
      ],
    Totals: { 
     subtotal: 12.95, 
     shipping: 2.34, 
     total: 15.00
    }

};

var asMoney=function(s) { return s; }


    var display = $('#shopp-cart-ajax');
    display.empty(); // clear any previous additions
    var ul = $('<ul class="sidecart_list"></ul>').appendTo(display);

    $.each(cart.items, function() {
      $('<li></li>').html('<strong>'+this.quantity+'</strong> x '+this.name).appendTo(ul);
    });
 $('<li></li>').html('<strong>Subotal</strong>'+asMoney(cart.Totals.subtotal)).appendTo(ul);
 $('<li></li>').html('<strong>Shipping</strong>'+asMoney(cart.Totals.shipping)).appendTo(ul);
    $('<li></li>').html('<strong>Total</strong> '+asMoney(cart.Totals.total)).appendTo(ul);

Answer 3

It looks like this line is your problem:

var item = $('<ul class="sidecart_list"></ul>').appendTo(display);

You are appending all your items to an object that was only initially appended to your display. It might be best to just append all following items straight to the display or append the item object to the display after it's been populated.