Doing a function when another one has loaded using JQuery

Question

I have two functions that I want to load them one by one. They are like this:

<script>
    //first function
    load_ajax_select(id);
    //second fucntion
    fadeIn_that_div();
</script>

I want to know how the second function can be done after the first one has loaded.

Thanks.

Move the second function call in the `complete` callback of first `$.ajax`. — Tushar, Dec 27 '15 at 12:34
@Tushar The second function will load just in one page. But the first one is used for another pages. I can't do this. — Majid Sadr, Dec 27 '15 at 12:37
Use flag, on ready `flag = true`, first load second ajax `flag = false` in `complete` before calling check `if (flag)`. Read between the lines. — Tushar, Dec 27 '15 at 12:38

score 1 · Accepted Answer · answered Dec 27 '15 at 12:49

Let's assume that load_ajax_select looks something like this:

function load_ajax_select() {
    $.get("/some/url", function(stuff) {
        $("some selector").html(stuff);
    });
}

or

function load_ajax_select() {
    $("some selector").load("/some/url");
}

or similar, probably with some other logic. In order for it to make it possible for other things to get notification when it's done, the most flexible thing it can do is return a promise. Depending on what it does, it may be simplest to return the promise it already has from the $.get:

function load_ajax_select() {
    return $.get("/some/url", function(stuff) {
        $("some selector").html(stuff);
    });
}

...or sometimes it's useful to create your own:

function load_ajax_select() {
    var d = $.Deferred();
    $("some selector").load("/some/url", function() {
        d.resolve();
    });
    return d.promise();
}

...although normally if you have one already, creating your own is an anti-pattern.

Code that doesn't care about knowing when the result occurs can just ignore the return value. But your code that needs to know can use it:

load_ajax_select().then(fadeIn_that_div);

or sometimes you may need

load_ajax_select().then(function() { fadeIn_that_div(); });

...if for some reason you can't call fadeIn_that_div directly via then.

Doing a function when another one has loaded using JQuery

1 Answers1