Code Couch » Dan

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"

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.

Fixing a disappearing caret in Firefox

Dan — Sun, 19 Oct 2008 12:45:53 +0000

There are many issues with Firefox hiding the caret (cursor) in text fields which have focus. There are various fixes, depending on the specifics of your issue, which mostly involve adding a style of “overflow:auto” to the input or container in question.

There is one case that doesn’t appear to have a fix, other than upgrading to Firefox 3: The cursor (caret) in a text input turns invisible when it is over a fixed element. I’ve known about this problem for a while, and have tried many solutions that fixed similar issues, but they never seemed to work for this specific one.

I’ve found a solution that works, but it has 2 drawbacks:

It requires JavaScript to work
It causes rendering errors on the fixed element when scrolling (almost as if the fixed element is scrolling as well)

Using the test harness below, you can see the problem and the fix. I’ve included my test background image after the code, to make the rendering problem very obvious.


 xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
 profile="http://gmpg.org/xfn/11">
	 http-equiv="content-type" content="text/html; charset=UTF-8" />
	 http-equiv="content-language" content="en" />
	</span></span>Disappearing caret bug - workaround<span class="sc2"><span class="kw2">
 
	 type="text/css">
		#fixedDiv {
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			background: url(caretBugBg.gif);
			position: fixed;
		}
 
		#contentDiv {
			position: relative;
		}
	
 
	 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

Creating a coloured gradient background without images

Dan — Wed, 03 May 2006 10:33:23 +0000

Here’s some code to dynamically create a gradient background without using images. The width and/or height of each colour band, as well as the total number of colour bands can be easily changed.

You can use “createGradientV” to create a vertical gradient (North to South), or “createGradientH” to create a horizontal gradient (West to East). Each of the functions takes one or more sets of 4 parameters, documented in the code.

To add more colour bands, simply add more sets of parameters to the relevant “createGradient” method calls.

This code has been tested working on IE/Win 6, NN/Win 7, Opera/Win 7, FF/Win, FF/Mac, and Safari/Mac. It does NOT work on IE/Mac (tested on version 5.22).

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="en" />
    <title>Gradient Backgroundtitle>
 
    <style type="text/css">
        body {
            padding: 0px;
            margin: 20px;
            background-color: #00CCFF;
        }
 
        #fadeBandsV {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 80px;
            z-index: 1;
        }
 
        #fadeBandsH {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            z-index: 1;
        }
 
        #fadeBandsV div {
            overflow: hidden;
            position: absolute;
            width: 100%;
        }
 
        #fadeBandsH div {
            overflow: hidden;
            position: absolute;
            height: 200px;
        }
 
        #pageContent {
            position: relative;
            z-index: 2;
        }
    style>
 
    <script type="text/javascript">
    
    script>
head>
 
<body onload="drawGradient();">
    <div id="fadeBandsV">div>
    <div id="fadeBandsH">div>
    <div id="pageContent">
        <h1>A test headingh1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.p>
    div>
body>
html>