On Dec 18, 10:22 am, "Jesse R." <[EMAIL PROTECTED]> wrote: > I am working on building a shopping cart and wanted to utilize > jQuery's ajax methods to enhance some response times. If you go > tohttp://www.blueskyvineyard.com/dry-wineand 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.
This is due to the IE implementation of XMLHTTP being a little over- enthusiastic about using cached copies instead of going back to the server for each request. There are two ways of improving this, I prefer to use both ways at the same time just to be sure. The first way is to add a parameter to your AJAX get request that changes every time, I usually use "nt: (new Date.getTime())", which can be ignored by the server code. The second way is for the server script to return a bunch of headers telling IE and any proxy servers to go back to the server every time. This is described at http://www.greenash.net.au/posts/thoughts/an-ie-ajax-gotcha-page-caching Hope this helps Andy K
