I am trying to call two different functions in third function but one after the other.One function has ajax call, whose values are used in other function. it is step by step process. I don't want to use one into the other.

function f1()
{
    // ajax call 
    return r1
}

function f2(r2)
{
    // do some of the work based on r2
}

function f3()
{
    $.when(f1()).done(function(data){
            f2(data)

    });
}

I also tried with $.when().then(); but still of no use.

Thanks, in advance.

UPDATE :- Below is the answer for my Question based on solution provide by @dreamweiver.

var json_data = '';
function f1()
{

    $.ajax({
         url: "test.php",
         method: "POST",
         async : false,
         data: { },
         success:function(data){
            json_data = eval(data);
         }

       });  


}

function f2(t)
{

    console.log("values is "+t);
}

function f3()
{
    $.when(f1()).done(function(){
        f2(json_data);
   });
}

Thanks everyone for your feedbacks.

I am trying to call two different functions in third function but one after the other.One function has ajax call, whose values are used in other function. it is step by step process. I don't want to use one into the other.

function f1()
{
    // ajax call 
    return r1
}

function f2(r2)
{
    // do some of the work based on r2
}

function f3()
{
    $.when(f1()).done(function(data){
            f2(data)

    });
}

I also tried with $.when().then(); but still of no use.

Thanks, in advance.

UPDATE :- Below is the answer for my Question based on solution provide by @dreamweiver.

var json_data = '';
function f1()
{

    $.ajax({
         url: "test.php",
         method: "POST",
         async : false,
         data: { },
         success:function(data){
            json_data = eval(data);
         }

       });  


}

function f2(t)
{

    console.log("values is "+t);
}

function f3()
{
    $.when(f1()).done(function(){
        f2(json_data);
   });
}

Thanks everyone for your feedbacks.

• javascript
• jquery

• 1 Did you try $.when(f1).done(function(data){ f2(data) }); – Dawid Pura Commented May 7, 2015 at 8:19
• 3 If you're using jQuery's ajax() then you should just be able to do: f1().then(f2). – James Commented May 7, 2015 at 8:20
• 1 why do you need the f3 function? presumably you want to set the promise then call f1? – atmd Commented May 7, 2015 at 8:20
• 1 Have you tried removing the () after your f1 call? ie. $.when(f1).done(... - if you call it with () then the function will execute instantly. What you probably should be doing is passing it as a variable for jQuery to execute later – Joe Commented May 7, 2015 at 8:20
• @James, i tried ur method but it shows "f1 is undefined" error – Purushottam zende Commented May 7, 2015 at 8:24

2 Answers 2

Try this way, I have tested locally and it works perfectly

function deferredCalls () {
   var jsonData = '';
   var f1 = function ()
   {
       // ajax call 
       $.ajax({
         url: "test.html",
         method: "POST",
         data: { id : menuId }
       }).done(function(data) {
          jsonData = data; //set the data
       });
   }

   var f2 = function (data)
   {
     // do some of the work based on data
     if(!!data){
       //process the data
     }
   }
   $.when(f1).done(function(){
        f2(jsonData);
   });
 }

f1 function is called first which would in turn make a ajax request and return data on success, which is set to a function scope variable jsonData. Once this process is pleted, f2 would be called which will start using jsonData, which is nothing but the data received from f1 function call.

This should be working:

function f1() {
    // Or some other Ajax request that returns a promise
    return $.getJSON('path/to/your/service');
}

function f2(r2) {
    // ...
}

f1().done(f2);