How to avoid blinking when refreshing a page from ajax

Question

I have a table with a header, a row with input fields, rows with data. Like it. http://brow.hu/sitegen/stackoverflow_table_example.png

If someone enters something into the input field, I want to filter the data using an ajax request. After receiving a new table, I change the contents of the old: div.innerHTML = req.responseText; and he blinks. How to avoid this?

Answer 1

One way to avoid flickering is called double buffering. In Ajax, this can be done simply with two divs occupying the same space, one of which has the style of "display: none", the other "display: inline". Always write to invisible, and then change the display styles. If divs have absolute positioning and size, there is absolutely no chance of flickering, and even if they do not, you can hardly do better.

Answer 2

It blinks because you are completely replacing the table ... if you add rows or delete rows from an existing table and then load AJAX data into the resulting table, it will not blink.