Doing something after jquery updates the DOM (AJAX request)

Question

I have some livequery handlers which update the page content. I'd like to display the content only after they have fired (to prevent users seeing for a while the unchanged version). The content is loaded using normal AJAX.

So far I tried the following:

1. get the ajax via html
2. make it invisible (visibility: hidden)
3. window.setTimeout(showContent, 100) - sets visibility to visible

I supposed this would work as there's a single JS thread for a single tab - so the timer should fire after all other operations finished. And it works in FF & IE. However in Chrome, sometimes I'm still seeing the unchanged content for a while - as if JS was threaded or interrupted by the timeout?

Or maybe there's a better way to achieve what I'm trying to do? (Without the timeout).

Answer 1

• you can use the success callback
• or you can return the javascript itself back and add it to the dom. (in which you'll specify the display mechanisms :) )

Answer 2

It turns out that livequery uses a timeout internally do run the live queries, so it was a matter of timeout method ordering.

So I solved this waiting until the livequery queue clears (with some boundaries, if the user is crazy with his mouse and constantly produces events):

function run_after_livequery(method) {
    var tries = 0;
    function run_if_livequery_done() {
        if (!$.livequery.queue.length || tries >= 20) {
            method();
        } else {
            window.setTimeout(run_if_livequery_done, 50);
            tries++;
        }
    }

    window.setTimeout(run_if_livequery_done, 50);
}