jQuery callback called too early?

Question

Here's the code I'm using:

function load(toLoad, area){
    $(area).html('<img src="images/ajax-loader.gif" alt="Loading" class="center" />');
    loadContent();
    function loadContent() {
     $(area).load(toLoad,'',sorter())
    };
    function sorter() {
     alert('s');
     $("#myTable").tablesorter({
      widgets: ['zebra']
     });
    };
    return false
};

When the load function is called, the alert shows when the loading image is shown, rather than after it has finished loading.

What is wrong with it?

Answer 1

I think the syntax is a little off for this.

instead of

function loadContent() {
    $(area).load(toLoad,'',sorter())
};

try

function loadContent() {
    $(area).load(toLoad,'',sorter)
};

Answer 2

Move your function definitions outside of the load function. It should look like

function load(toLoad, area){
    $(area).html('<img src="images/ajax-loader.gif" alt="Loading" class="center" />');
    loadContent();
}

function loadContent() {
        $(area).load(toLoad,'',sorter())
}

function sorter() {
        alert('s');
        $("#myTable").tablesorter({
                widgets: ['zebra']
        });
    };
    return false
}

Answer 3

Try the following (wrap the call to sorter() in the load function in an anonymous function)

function load(toLoad, area){
    $(area).html('<img src="images/ajax-loader.gif" alt="Loading" class="center" />');
    loadContent();
    function loadContent() {
        $(area).load(toLoad,'',function() {sorter()})
    };
    function sorter() {
        alert('s');
        $("#myTable").tablesorter({
                widgets: ['zebra']
        });
    };
    return false
};