How do eliminate the flicker effect on ajax call

Question

I am encountering a problem:

On an html page, when i click a certain control (a tab panel title) i make an ajax call.

From Wicket (java code) i call a javascript function that "redraws" all the componenets on my page (this is like a reload of the page). Everytime i do this i get a flickering effect on the html (which, as i said, after the ajax call will trigger a redrawing of all the components on the page).

I am triggering the javascript function (that redraws) because i need to "redraw" using the new information supplied by the ajax response (the response gives me a new table for instance and i have to redraw, repaint the page using this new info as a sort of parameter, according to it).

Answer 1

Sorry, but to be clear here: when you say "redraw" do you really mean redraw the currently existing content (as in "do dynamic changes to the table but don't delete it") or do you mean replacing the existing content with some new content, as is the normal Ajax technique?

If you are replacing existing components with new components you should be OK as long as you provide some kind of fading/animation effect that draws the user's attention from the fact the control is being replaced. Sometimes doing some kind of "screen buffering" (loading all the new components in a hidden div, then replacing an existing div with the new one) will help if you are updating a lot of the interface.