I am working on building a shopping cart and wanted to utilize
jQuery's ajax methods to enhance some response times.  If you go to
http://www.blueskyvineyard.com/dry-wine and add an item to the cart,
then either click the "+" or "-" to increase or decrease the quantity,
it works just as expected in Firefox.  However, in either flavor of
IE, it will only increment or decrement once, and then will stop
functioning.  Here is my current code:

jQuery(document).ready(function(){
      jQuery("#highlight").animate({
        backgroundColor: "#b1f3b1"
      }, 500 );
          jQuery("#highlight").animate({
        backgroundColor: "white"
      }, 500 );
          jQuery("#highlight").animate({
        backgroundColor: "#b1f3b1"
      }, 500 );
          jQuery("#highlight").animate({
        backgroundColor: "white"
      }, 500 );
          jQuery('#clearCart').click(function() {
                jQuery.get("/", { clearCart: "1"} );
                jQuery("#minicart").html("<h1>Your Cart</h1><p>Your cart is 
empty.</
p>");
                return false;
                });
          jQuery("#clearCart").confirm({
                        msg:'Are you Sure? '
          });
          jQuery(".ajax-container").each(function (i) {
            var target = this;
                var $target = jQuery(target);
        var id = jQuery(this).attr("id");

                jQuery("#remove" + id).click(function () {
                        jQuery("#ajaxwrapper"+id).text("");
                        jQuery.getJSON("/ajax-cart", { clearItem: id}, 
function(json){
                                if (json.e == "0") {
                                        jQuery("#totalitems").text(json.t);
                                        jQuery("#subtotal").text(json.s);
                                        jQuery("#discounttotal").text(json.d);
                                } else {
                                        jQuery("#minicart").html("<h1>Your 
Cart</h1><p>Your cart is
empty.</p>");
                                        }
                                });
                        return false;
                        });

                jQuery("#inc" + id).click(function () {
                        var quantity = $target.text();
                        var incvalue = parseInt(quantity) + 1;
                        $target.text(incvalue);
                        jQuery.getJSON("/ajax-cart", { increment: id}, 
function(json){
                                jQuery("#totalitems").text(json.t);
                                jQuery("#subtotal").text(json.s);
                                jQuery("#discounttotal").text(json.d);
                                });
                        return false;
                        });

                jQuery("#dec" + id).click(function () {
                        var quantity = $target.text();
                        var decvalue = parseInt(quantity) - 1;
                        $target.text(decvalue);

                        if (decvalue == "0") {
                                jQuery("#ajaxwrapper"+id).text("");
                        }
                        jQuery.getJSON("/ajax-cart", { decrement: id}, 
function(json){
                                if (json.e == "0") {
                                        jQuery("#totalitems").text(json.t);
                                        jQuery("#subtotal").text(json.s);
                                        jQuery("#discounttotal").text(json.d);
                                } else {
                                        jQuery("#minicart").html("<h1>Your 
Cart</h1><p>Your cart is
empty.</p>");
                                        }
                                });
                        return false;
                        });
      });

        jQuery(".ajax").attr({
          href: "#"
                });
});

Any ideas?  Also any tips on making my code less redundant would be
helpful as I am kind of new at this.

Reply via email to