I have 2 functions.
function f1() {
$.ajax(..., success: function(response) {
// some code executed whenever request is completed.
}
}
function f2() {
// my code
}
I need to call these functions one after another.
f1() // waiting until ajax request in the function is complete.
f2()
I tried $.when().then(), however it didn't seem to work.
The $.ajax call returns an instance of $.Deferred which is used to track the progress of the call - that is what you need to return from your f1 function. You can then use .then(), .done() etc.
Edit in response to comments
If you want to invoke a callback within f1 as well as externally you can return the result of the .pipe method.
function f1() {
return $.ajax(/*...*/).pipe(function() {
//local 'done' handler
});
}
function f2(resultFromF1Handler) {
//...
}
f1().done(f2);
f1function f1(onsuccess)
{
$.ajax(
{
success: function(r)
{
// some code
onsuccess(r);
}
});
}
function f2()
{
// my code
}
f1(f2);
$.Deferred: what if you want to attach 2 'success' handlers? Or a 'fail' handler?
function success(){ f2(); f3();} f1(success, fail);
f2() from f1() without f1 knowing any specifics of f2. All it's doing is designing f1() to support calling an arbitrary function after its ajax call succeeds.I suggest calling f2() inside the anonymous function that is executed as f1()'s success.
Is there a problem with doing that?
f1 needs to be aware of f2. By using the $.Deferred, these two functions could be in separate files or separate libraries and still work as the OP desires