Algorithm to stop flickering (clear box and re-populate) when adding text

Question

Hey all,

I was wondering if there's a some algorithm or resource that will look at the changes made from an AJAX request and not update the whole box (causing a flicker) but just add/remove the changes made.

This is specifically used with the keypress command.

A good example is stack overflows "preview" it doesn't flicker when you add more text it just parses the text then adds it (though I'm not sure that it uses AJAX in stackoverflow's case).

I'm using jquery like so: $('#content').html(response);

Thanks! Matt Mueller

Answer 1

The best (most flexible way) to accomplish something like this would to break your target and response into chunks. Returning a json object with something like {object-id: 'html source', ...} and checking if each object has changes associated with it before updating.

I'm guessing you want a catch-all parsing-solution, something like a text-difference scanner that will only update the changed portions - but this creates more inflexible problems. Because this is done through an Ajax call, it's hard to determine what will be returned (if it's a valid request or not), and how much of it has changed.

For reference, the preview on SO uses Attacklab's Showdown, which is a pure-javascript parse.