Tag archive: Ajax

WebDev: jQuery, JSON, IE and Caching

I’m almost ready to update the production version of UVFood.com. I’ve been testing against Firefox during development, but I can’t possibly deploy the update without testing against other browsers. Safari turned up no surprises, and Opera has turned up a weird little problem that doesn’t make any sense.

But of course it was Internet Explorer that had the biggest issues.

Bookmarking is done via Ajax. When you bookmark a listing the icon changes from a heart with a plus sign to a heart with a minus sign, the count of the number of times the the listing was bookmarked is updated and a message is displayed that confirms the item was bookmarked. This works fine with Safari, Firefox and Opera. Internet Explorer, however, exhibits some truly erratic behavior. When you bookmark a listing in IE everything you expect happens. But when you click again to remove it from the bookmarks – everything that happened the last time happened again.

Entering a review worked, though. But clicking stars to rate a listing had a similar problem.

The problem was that jQuery on IE was caching the JSON results, something it wasn’t doing on Safari or Firefox.

The first thing I tried was to make sure that my server returned a header in the response to tell the client not to cache the results. It’s a simple header line:

Cache-Control: no-cache

Unfortunately this didn’t change anything. It’s still good practice to make sure that your server emits the correct cache control headers, though.

Then I remembered a discussion of jQuery and GET vs. POST methods. GET is meant to be idempotent, no ill effects if it’s repeated (a request to move to position 8 is idempotent; a request to move to the next position is not). And it may be okay to store the results of a GET. POST is meant to be used for other requests.

Unfortunately, the convenience function that jQuery offers for dealing with jSON Ajax requests is getJSON(), which uses a GET request. It’s easy to write a postJSON() convenience function, however. Just add this to your jQuery initialization code:

$.postJSON = function(url, data, callback) { $.post(url, data, callback, "json");

Changing my code to use postJSON() instead of getJSON() solved the problem.

Offline jQuery Documentation for MacOS X

I’m rewriting UVFood to use jQuery instead of Prototype. I’m liking jQuery quite a bit and my code’s looking much better (and tighter).

I don’t always have reliable online access when I’m coding – in particular, I was on a bus today for a couple of hours and didn’t always have Internet access. There are a couple of dashboard widgets for MacOS X which I found that helped out on the jQuery documentation front.

First, there’s http://code.google.com/p/jquery-reference/. This widget is designed for browsing… click around in it, but don’t expect to search it.

Then there’s also http://blog.medallia.com/2007/05/jquery_reference_widget.html. This widget is designed for searching – if you know what you’re looking for, you can find it quickly.

They’re both useful in different ways, and I used them both this afternoon.

%d bloggers like this:
var _gaq = _gaq || []; var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js'; _gaq.push(['_require', 'inpage_linkid', pluginUrl]); _gaq.push(['_setAccount', 'UA-239812-12']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();