How to avoid blinking when updating page from ajax

Question

I've got a table with a header, a row with input fields, rows with data.

If somebody enters something into an input field I want to filter the data with an ajax query. After receiving the new table I change the content of the old one: div.innerHTML = req.responseText; and it blinks. How to avoid that?

Answer 1

It blinks because you're completely replacing the table ... if you add rows to or delete rows from the existing table and then load your AJAX data into the resulting table it won't blink.

Answer 2

One way to avoid flicker is called double-buffering. In Ajax, this can be done simply with 2 divs occupying the same space, one of them with the style 'display: none', the other 'display: inline'. Always write to the invisible one, and then swap display styles. If the divs have absolute positioning and size, there is absolutely no chance for flicker, and even if they don't, you can hardly do better.