IE is not showing updated IMG SRC change done in Javascript

Question

ISSUE: IE version 7 and 8 is not showing updated IMG SRC change done in JavaScript

You can see what I mean if you go to the URL below, and on the left under (3) I want a different liner, you choose one of the swatches; lets say you choose "Asahi Chartreuse". Notice nothing happens to the preview on the left. BUT then if you go ahead and choose another swatch, you will see the preview on the left shift to show Asahi Chartreuse. So it is one behind. This is why I believe it is a "refresh" issue. It works in Chrome just fine.

In IE: Notice if you click on some other control, the refresh happens.

You can see the code here: https://www.casemodo.com/test.asp

WHAT I'VE TRIED SO FAR:

I've tried adding headers to say "no-cache".

I've tried adding "?" and random number after the png file name.

I've tried setting focus() to the image after changing the src.

I've tried, after changing src, telling the style.display to be hidden and then visible.

I've tried creating a hidden (and not hidden) text input box on the page and then setting focus() to it after changing img src.

I've tried setting window.focus().

I've tried (as you see now) setting an alert after changing the src.

GUESS: What it looks like now is the JavaScript engine just pauses after I set that src UNTIL you manually click (focus) somewhere else on the screen. So it never even gets to all of those scripts I've tried above.

Answer 1

Set the src attribute to null, then set it to your new url:

in jquery:

var myImg = $('#myImg');
myImg.attr('src', null);
myImg.attr('src', newUrl);

in straight js:

var myImg = document.getElementById('myImg');
myImg.src = null;
myImg.src = newUrl

This worked for me - it was driving me mad!

Answer 2

Try to use onclick instead of onchange. The latter doesnt work well with some form elements in some browsers.

Answer 3

I've seen similar IE issues solved with a seemingly bizarre reassignment of innerHTML. Suppose "container" is a variable referencing the parentNode of the img. Try "container.innerHTML = container.innerHTML". This triggers a re-rendering and may bring the errant img to life.