Refreshing in IE

IE Seven is Way Too Smart for Its Own Good

[cmarshall]

I have a nasty caching problem with IE7.

I have an image button like so:

<style type="text/css">
 a.normal{
 display:block;
 width:32px;
 height:32px;
 background-position:center;
 background-repeat:no-repeat;
 background-image:url(someimage.gif);
 }
 a.busy{
 background-image:url(someotherimage.gif);
 }
</style>
<a href="javascript:document.getElementById("my_a").className='busy'" id="my_a" class="normal"></a>

Now, on every browser, EXCEPT IE, the button immediately changes its appearance.

Except, in IE, nothing happens until you click away from the button.

This is pretty obviously a caching issue. I have other caching issues, like it not calling PHP functions if the URL hasn't changed, which makes me wonder if there might not be something wrong with this installation.

Any ideas? I'm sure the solution must be absurdly simple. I just want to redraw a document element, not refresh the whole page (this is in an AJAX implementation, so a refresh would defeat the purpose).

[cmarshall]

Just as an update: It also happens with IE6 (IE7 doesn't seem to have addressed the many, many problems of IE6). However, I was able to solve the PHP caching problem by adding a couple of headers to the PHP file to prevent caching of that page.

[Fotiman]

The problem is not a caching issue.

First, you should not be doing this:
href="javascript:document.getElementById("my_a").className='busy'"

The href won't be fired until you have finished clicking the button and events have been processed.

Try this instead:

<a href="#" id="my_a" class="normal"></a>

Then attach your event handler in an unobtrusive way:

<script>
function aClickHandler()
{
var a = document.getElementById("my_a");
a['className'] = 'busy';
}
function init()
{
var a = document.getElementById("my_a");
a.onclick = aClickHandler;
}
window.onload = init;
</script>

[cmarshall]

Thanks! I'll try that!

I was able to address it in a slightly hacky way:

Instead of assigning a new className, I just do a direct backgroundImage assignment for busy, then clear it when I'm done. In each case, IE seems to update pretty much immediately.

However, your fix may be better. I'll try it out.

[cmarshall]

Actually, the onClick= thing didn't work. Not sure why. So far, my direct backgroundImage= kludge seems to be the only thing to do it.

IE has always been a royal pain with CSS. IE7 didn't address most of the IE6 quirks.

However, they DID address some supercritical, Earth-shattering issues like transparent PNG and multiple animated GIF backgrounds.

[RonPK]

Just some comments (in addition to what Fotiman said):

<a href="javascript:document.getElementById("my_a").className='busy'" id="my_a" class="normal"></a>

* it's better to use single quotes for my_a:

getElementById('my_a')

. Otherwise, the first double quote indicates the end of the href-attribute - it's amazing that FF doesn't have a problem with it.

* anyway, it's easier to use

this

if you're referring to the element itself:

javascript:this.className='busy'

[cmarshall]

* it's better to use single quotes for my_a: getElementById('my_a').

Yeah, but it was "p-code," (which stands for "paraphrase code."). The actual code is a bit more intense, and doesn't reference itself that way. I always use double-quotes for attribute values, and single-quotes internally for JavaScript quotes.

Thanks!