Question

I have an update panel in an ascx page using .Net 3.5.

The user enters data, initiates a callback, and ajax updates the DOM.

Usually everything’s all hunky dory. Once in a while the DOM gets updated and IE doesn’t bother refreshing the display. The entire updated area appears to be blank.

Once the user does something that would trigger a refresh, like resizing the window, the data instantly appears on the screen, but not until then.

Why is this? What could cause it? How can it be fixed?

Answer 1

You can ‘fix’ it by switching to real browsers 🙂

Really, you might be able to fix it according to the trick I found in this page.

Basically, what you need to do is create an empty node and delete it locally after you update the DOM with your new content:

var t = document.createTextNode('temp text');
element.appendChild(t); // Not sure if this is any element
                        // or one inside your new DOM nodes.
setTimeout(function() { t.parentNode.removeChild(t); }, 0);

In that page the author says:

Even with my “fix,” it only works if
the user moves their mouser cursor out
of the window and back in.

But I guess that’s as good as it gets… I think IE may not be triggering a refresh unless there’s some activity on the browser window, to save processing time.

That’s been a known really annoying bug in IE for a long time now, although I can’t find it posted anywhere. In fact, even Opera has that bug from time to time.

Also, even if you solve it using that trick, check that every single piece of HTML is valid. You can check it in http://validator.w3.org. If some piece of code is invalid, then you can’t blame the browser for not understanding what you meant.