jQuery Ajax Problems in IE6 and IE7

788 Posts

jesster444 Reply #1, 18 years, 10 months ago

So I decided to get down and dirty with some of the ajax functionality of jQuery. In FireFox, if you increment or decrement an item, it works flawlessly. Firebug shows no errors and shows a get request being fired off on every click. However, in IE6 or 7, it will only increment or decrement by 1 and will then stop working.

The bit of code is here:

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: "#"
		});

You can view this at:
http://www.blueskyvineyard.com/dry-wine

Just add an item an then try to increment or decrement it. It is driving me a little bonkers trying to figure it out and any help would be appreciated.

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

165 Posts

banal Reply #2, 18 years, 10 months ago

Hi Jesse R.

I checked if it works in IE6 and it does. Maybe you had some old JS File cached?

788 Posts

jesster444 Reply #3, 18 years, 10 months ago

Haha, I actually just fixed it before both of you posted. IE6 and IE7 will cache get requests if the URL is the same. So in this instance, when you go to increment the URL looks like this:

http://www.blueskyvineyard.com/?increment=item and it will be this same URL for each attempt to increment. As such, IE7 ignores the ajax request. Simply I just added the current time to the URL upon every click so that it is a unique URL and IE6 and IE7 will not cache the ajax request.

@ganesheXL
Unfortunately that is the nature of the beast with GoogleCheckout. Once you are sent to their page, there is no easy way to update your cart anymore. It would be nice if google provided for the ability to delete items/update quantities once in there, but they don’t. It would also be nice if they would provide a link directing you back to the page you came from, as it is difficult to use the browsers back button once on the Checkout page. Maybe I will make the feature request. Knowing this, that is why I am striving to make it so easy to update/delete/add on my side as possible. Also, I am aware that when you add items right now utilizing my new ajax madness, that it isn’t reflected on the final checkout. I have to figure out how to update the button with the correct information before it is submitted. Learning as I go.

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

1,611 Posts

ZAP Reply #4, 18 years, 10 months ago

I’ve found that Ajax GET requests can fail on IE6, sometimes even if you append a random number to the query string. I’ve also found that the response header is also extremely important for such requests, depending on your server settings. jQuery.getJSON uses GET, whereas jQuery.ajax and jQuery.load can be used to make POST requests.

"Things are not what they appear to be; nor are they otherwise." - Buddha

"Well, gee, Buddha - that wasn't very helpful..." - ZAP

Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options

788 Posts

jesster444 Reply #5, 18 years, 10 months ago

Supposedly you can use jQuery.post(url,data,callback,"json") also. I switched over to that and all seems to be working well. From what I have read, IE does not cache POSTs.

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.