Code Couch

How to stop Internet Explorer from caching AJAX requests

Dan — Sat, 31 Jan 2009 13:53:34 +0000

I recently had to revisit the issue of IE’s default cache settings causing problems when making AJAX requests. Out-of-the-box, the cache setting is ‘Automatically’, where pages are only fetched from the server if the cached content is from an earlier day, old or from an earlier session.

This can be a nightmare to deal with, as you cannot ask all users of a web site to change their browser settings.

One workaround is to use a ‘cache buster’ parameter in your GET request. Something like this:

var urlToFetch = 'whatever.php?randNum=' + new Date().getTime();

This works very well, but can have drawbacks, depending on your server setup. For example, if your application server sits behind a caching layer, you wouldn’t want the URL to be different every time for idempotent requests, as the cached version would never get used, and so your application server would get a direct hit every time.

One way around this without using to parameters is to set the ‘Cache-Control’ response header to direct the browser how to cache the response.

The ‘Cache-Control’ header can have various values, one of which is ‘no-cache’. This tells the browser that it should not cache the response, so the next time the same URL is requested, new content will always be sent (as there is no previous version in the browser’s cache).

This is how we do it using Groovy:

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store"

So really, which method you use boils down to this: If you know that the cache buster will have a performance hit on your setup, then don’t use it, otherwise use whichever method you prefer.

Also, as a developer, I can highly recommend changing your IE cache settings to ‘Every visit to the page’.

Update 10/02/2008

We’re finding that with some of our automated testing, IE 7 still caches the odd file now and then. To get around this, we have modified our ‘Cache-Control’ header to include two non-standard properties, ‘post-check’ and ‘pre-check’, and added an ‘Expires’ header as well:

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store,post-check=0,pre-check=0";
response.addHeader "Expires", "Mon, 26 Jul 1997 05:00:00 GMT"

Speed up your Javascript

Jeff — Mon, 26 Jan 2009 12:31:38 +0000

I came across some very interesting and informative articles on Javascript performance improvement from Nicolas Zakas (the author of the newly released Professional JavaScript, Second Edition book):

This is an ongoing series of articles with specific Javascript examples that make sense.

Use CSS pseudo classes to enhance accessibility

Jeff — Tue, 20 Jan 2009 14:42:16 +0000

CSS pseudo-classes are probably not something most people are familiar with – although many developers would make use of them without necessarily being aware of it! When you hover the mouse over a link, many sites will underline the link for you. This is using the hover pseudo-class.

a { text-decoration:none; }
a:hover { text-decoration:underline; }

The above example sets all anchors to have no underline text decoration, and the hover pseudo-class sets all anchors to have an underline on them. When the user hovers their mouse over a link, an underline will show under the link. When they move their mouse away, the hover pseudo-class stops taking effect and the underline is removed.

Pseudo-classes are supported with all modern browsers, but this support is only for the anchor element. Any attempt to use a pseudo-class on any other element will not work in Internet Explorer 6.

There are other pseudo-classes that can be used to provide a more usable experience for those that primarily use a keyboard to navigation through a page. The first of these is the focus pseudo-class (which take affect when the element gains focus – such as tabbing to the element). This pseudo-class can be used to style elements when they receive focus.

Building on the initial example, the addition of a focus pseudo-class will ensure that the same hover effects (in this case some underline text decoration) are applied when the user tabs focus to the anchor.

a { text-decoration:none; }
a:hover, a:focus { text-decoration:underline; }

This would be fine, except that Internet Explorer 6 doesn’t understand the focus pseudo-class at all! The solution is to use the active pseudo-class to extend the CSS rule.

a { text-decoration:none; }
a:hover, a:focus, a:active { text-decoration:underline; }

The order of the pseudo-class rules is important (and if you get the order wrong, you may experience some of the CSS rules displaying inconsistently across browsers). As a general rule, always put pseudo-classes in the following order:

link, visited, hover, focus, active

So, whenever you define a hover pseudo-class CSS rule, consider adding in a focus and then an active pseudo-class at the same time – it will help users that choose to use the keyboard to navigate your site.

Replacement for “bind” or “bindAsEventListener” in jQuery

Dan — Mon, 15 Dec 2008 20:21:47 +0000

After working for many years with the Prototype JS framework, I decided it was time to bite the bullet and learn jQuery.

There were 3 reasons, really… 1: I’ve just started a new project and don’t need most of the bloat Prototype comes with; 2: I can now make a judgement call when it comes to choosing a framework; and 3: It’s another skill on my CV )

I’ve just spent the weekend reading jQuery in Action cover-to-cover, and I can highly recommend it for intermediate or advanced developers looking to see what it offers.

The one thing I miss from Prototype however are the “bind” and “bindAsEventListener” commands which can set the context (”this”) of the callback – in my case, the instance of a class.

After a bit of searching, I found this post by Andreas Gohr. It was coderjoe’s comment that set the wheels in motion. He showed that you could rewrite this Prototype code:

initialize: function() {
	Event.observe(someEl, 'click',
		this.doSomething.bindAsEventListener(this)
	);
}

as this jQuery code:

init: function() {
	var self = this;
	$(someEl).bind('click', function(eventData) {
		self.doSomething(eventData, self);
	});
}

The bind (and related) method allows you to pass three parameters, however: the event type, some data, and a callback function. If the data parameter is omitted, the callback can be put as the second parameter.

So, we can re-write that last example using the second data parameter, removing the need to set a scoped variable:

init: function() {
	jQuery(someEl).bind('click', {thisContext:this}, function(eventData) {
		eventData.data.thisContext.doSomething(eventData);
	});
}

Spell checking in Firefox

Dan — Wed, 10 Dec 2008 21:07:05 +0000

A handy tip I came across the other day was how to spell-check an entire web page using Firefox – not just textarea elements.

You basically put the page into design mode – so the content becomes editable. Enter this in the URL bar:

javascript:void(document.designMode='on');

You can also add spell checking to fields which do not have it by default (e.g. single-line input elements) by adding a “spellcheck” attribute set to “true”, e.g.:

 type="text" size="50" spellcheck="true">

See https://developer.mozilla.org/en/Controlling_spell_checking_in_HTML_forms for more information.

How do you vertically centre content using CSS?

Jeff — Tue, 28 Oct 2008 13:12:07 +0000

How do you vertical centre some content using CSS (and some extra div elements)? This is the same simple layout that used to be achieved using a table and valign attribute. This solution doesn’t require a table at all (but it does require some extra div elements – as per the markup below).

With the following markup:

 class="verticalCenteringOuter" id="moduleA">
	 class="verticalCenteringMiddle">
		 class="verticalCenteringInner">
			Some vertical aligned content here

Using the following CSS:


 
	 type="text/javascript">
		function fixCaretBug() {
			document.getElementById('fixedDiv').style.zIndex = -1;
			setTimeout(fixCaretBugPartTwo, 0);
		}
 
		function fixCaretBugPartTwo() {
			document.getElementById('fixedDiv').style.zIndex = 0;
		}
	

 

	 id="fixedDiv">

id="contentDiv">

There is a small flicker when the fix is enabled, although this could potentially be fixed by hooking into the DOMContentLoaded event and running the fix before the background image is loaded.

My test background image