[jQuery] Ajax Working in Firefox 2.0.0.11 but not in IE6 or IE7
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>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>
Your cart is
empty.
");
}
});
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>Your cart is
empty.
");
}
});
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.