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?

You may also be interested in the answers here... http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome — Nosredna, Nov 15 '09 at 23:59
@Soufiane Hassou, it was somewhere else in the code. I didn't see a reason for including it. — Hintswen, Nov 16 '09 at 00:01

score 5 · Accepted Answer · answered Nov 15 '09 at 23:55

5

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)
};

answered Nov 15 '09 at 23:55

Chris Gutierrez

4,750
19
18

Perfect. I don't know why it seemed to work with the brackets in other places though... Maybe I just didn't notice it. – Hintswen Nov 15 '09 at 23:59

score 0 · Answer 2 · answered Nov 15 '09 at 23:55

0

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
}

answered Nov 15 '09 at 23:55

stimms

42,945
30
96
149

ha! I knew that looked wrong, I actually got the code from somewhere else and couldn't figure out why they had it like that. – Hintswen Nov 15 '09 at 23:58

score 0 · Answer 3 · answered Nov 15 '09 at 23:58

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
};

jQuery callback called too early?

3 Answers3