call a function after another function is completed

Question

I am trying to call another function after load() is completed. I first tried to check with alert(), however, I see the alert before load() is done. I am able to successfully load content in load() function. However, alert() is empty.

$(document).ready(function(){   

    load();
    $.when(load()).done(function(){
        alert((document.getElementById('item').innerHTML));
    });        

    function load()
    { 
        $("#item").load("/somepage.aspx", function (response, status, xhr){
              if ( status == "error" ) {
                var msg = "error: ";
                $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
              }
        });                         
    };
});

Barmar · Accepted Answer · 2015-07-15T18:49:48.337

1

You need load() to return a promise, and then you pass this promise to $.when.

.load() doesn't return a promise, it returns the jQuery collection that it was called on (for chaining purposes). You can rewrite load() using $.get() instead, which returns a jQXHR, which implements Deferred (that's jQuery's promise class).

var p = load();
$.when(p).done(function() {
    alert($("#item").html());
});

function load() {
    return $.get("/somepage.aspx", function (response, status, xhr){
        $("#item").html(response);
        if ( status == "error" ) {
            var msg = "error: ";
            $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
        }
    });
}

You don't actually need to use $.when, you can just write:

p.done(function() { ... });

edited Jul 15 '15 at 18:49

answered Jul 15 '15 at 18:43

Barmar

741,623
53
500
612

Looks like you're right. I was thinking it was like the other AJAX shorthand functions. – Barmar Jul 15 '15 at 18:46
thnks a lot Barmar it worked now. In somepage.aspx, i have used $.ajax to call web service and returned the data which i appended in that page. Now when i use load() to upload that data, even though i can see the data content, i can't get any elements. Is there solution for that? – smtp Jul 15 '15 at 19:14
I'm not sure what you're asking, it would be best if you posted the details in a new question. – Barmar Jul 15 '15 at 19:19
But first read: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Barmar Jul 15 '15 at 19:20
using the method shown earlier, how can i retrieve only content of .aspx page. Say, div content with id #p. thnks. – smtp Jul 16 '15 at 23:00
You can use `$("#item").load("/somepage.aspx #p", function(response, status, xhr) { ... });` – Barmar Jul 16 '15 at 23:09
ya i used that earlier but didn't load anything because i would have to trigger the javascript functions inside the page to load that content. I guess i would load the whole page and parse the content. – smtp Jul 16 '15 at 23:17

score 1 · Answer 2 · answered Jul 15 '15 at 18:43

You can use callback functions and update your code to following

$(document).ready(function(){   

    load(function(){
        alert((document.getElementById('item').innerHTML));
    });

    function load(callback)
    { 
        $("#item").load("/somepage.aspx", function (response, status, xhr){
              if ( status == "error" ) {
                var msg = "error: ";
                $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
              }
              if(callback) {
                   callback();
              }
        });                         
    };
});

score 0 · Answer 3 · answered Jul 15 '15 at 19:20

You can use the new Promises API which is already implemented in most major browsers.

var jsonPromise = new Promise(function(resolve, reject) {
    // do a thing, possibly async, then…

    if ( /* everything turned out fine */ ) {
        resolve("Stuff worked!");
    } 
    else {
        reject(Error("It broke"));
   }
});

jsonPromise.then(function(data) {
    console.log(result); // "Stuff worked!"
}, function(err) {
    console.log(err); // Error: "It broke"
});

call a function after another function is completed

3 Answers3