How to return multiple values from an ajax success event

Question

I have two js files i.e. myJs1.js and myJs2.js . From myJs1.js a method of myJs2.js is called.

I want to return r1 and r2 into results(in myJs1.js)

I have tried this: I declared r1 and r2 variables before the ajax call and after the ajax call I added:

return [r1,r2];

But it return r1 and r2 as undefined. When I researched the issue I came across that adding async: false could work but it has so many issues (like browser freezing). Even so I tried it and still was not able to get the values of r1 and r2.

Note: I am uing AJAX for the first time so bear that in mind.

EDIT: There is an ajax call in Js1 in which on success event the method is called. I want to access the result to call another method in the js1

EDIT:LOOK HERE FOR THE CODE

myJS1:

function method() 
{

$.ajax({ 
    type: "GET",
    dataType: "json",
    url: "http://127.0.0.1:8000/***/***",
    success: function(response){
        result=methodOfmyJs2(response);
        load1(r1); //r1 from result
        load2(r2); //r2 from result
    }
})

}

myJs2 :

function methodOfmyJs2(data)
{
    $.ajax({ 
    type: "GET",
    data:SomeData,
    dataType: "json",
    url: "http://127.0.0.1:8000/***/***",
    success: function(response){
      r1=anotherMethodFromThisJS1(response);
      r2=anotherMethodFromThisJS2(response); 
      result=[r1,r2]
    }
})

}

I need to access the value of r1 and r2 to call load1 and load2 method of myJs1.

You can't return values from an asynchronous operation. It makes no sense. And you're already using jQuery. — Pointy, Jan 07 '16 at 16:01
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — nem035, Jan 07 '16 at 16:01
The function that you pass to `success` property is a callback and it will be invoked when a valid response is available. You don't have to return anything from this method. Just use the response and update any variables or views if you need to — Arkantos, Jan 07 '16 at 16:02
@nem i have edited the question properly now. I dnt think it is completly duplicate. — Aman Gupta, Jan 07 '16 at 16:27
@pointy soory, "no jquery" was copied from somewhere by mistake. i didnt notice it. — Aman Gupta, Jan 07 '16 at 16:30
@AmanGupta please include the code where you're having trouble accessing the values afterward as well. I think some of the context is lost, and that's making it difficult for everyone to understand your problem. — Mic, Jan 07 '16 at 17:02
@Mic I have tried my best to explain my issue and updated the code as you mentioned. — Aman Gupta, Jan 07 '16 at 17:21

score 3 · Answer 1 · answered Jan 07 '16 at 16:17

Ajax calls are asynchronous by default, meaning ajax call function jQuery.ajax() wont wait for the HTTP response to come back before returning.

To get the data after the HTTP response has arrived we have to provide a callback, that's success function. If you want to get this data inside another function just call that function inside success callback.

Following is the code:

//JS1.
function processResponse(r1, r2) {
    // do processing here with r1 and r2
}

//JS2.
function methodOfmyJs2()
{
     $.ajax({ 
        type: "GET",
        data:somedata,
        dataType: "json",
        url: "http://127.0.0.1:8000/****/****",
        success: function(response){
            r1=anotherMethodFromThisJS1(response);
            r2=anotherMethodFromThisJS2(response); 

            //calling the success callback
            processResponse(r1, r1);
        }  
    }); 
}

There's another option if you really want to do it, you can make your Ajax call synchronous like below.

$.ajax({
    type: "GET",
    url: remote_url,
    async: false,//now call is synchronous
    success : function (data) {
    }
});

Now jQuery.ajax() will wait till HTTP response has arrived, then you can return [r1, r2] from methodOfmyJs2().

However you should avoid making synchronous calls as it will make the JS thread wait freezing the UI.

Can you please look at the question again.i have edited it now properly. Soory for the inconvinince. — Aman Gupta, Jan 07 '16 at 16:28

interested · Answer 2 · 2016-01-08T08:30:56.880

2

You could use a callback instead.

[EDIT]

myJS1:

function method () {
    $.ajax({ 
        type: "GET",
        dataType: "json",
        url: "http://127.0.0.1:8000/***/***",
        success: function (response) {
            methodOfmyJS2(function (r1, r2) {
                load1(r1);
                load2(r2);
            });
        }
    });
}

myJS2:

methodOfmyJs2 (callback) {
    $.ajax({
        type: "GET",
        data: somedata,
        dataType: "json",
        url: "http://127.0.0.1:8000/****/****",
        success: function (response) {
            var r1 = anotherMethodFromThisJS1(response);
            var r2 = anotherMethodFromThisJS2(response);

            callback(r1, r2);
    });
}

edited Jan 08 '16 at 08:30

answered Jan 07 '16 at 16:08

interested

324
1
9

Thank you for the quick reply.I have edited the question code " method call has a parameter "data" ". How about that. – Aman Gupta Jan 07 '16 at 16:16
Can you please look at the question again.i have edited it now properly. Soory for the inconvinince. – Aman Gupta Jan 07 '16 at 16:28
I can't understand what you're trying to say in the edit. You want to access the result of one ajax call into another ajax call ? – 11thdimension Jan 07 '16 at 16:34
on success of ajax of js1, method of js2 is called with a parameter, in this method there is a ajax call and on success of it i want to return the result back in the success of first ajax where some other method is called with the result. – Aman Gupta Jan 07 '16 at 16:39
I edited my post. I think I unterstood now your problem. – interested Jan 08 '16 at 08:17

cloudguy · Answer 3 · 2016-01-07T17:19:58.580

$.ajax returns promise, which can be chained with then

function getAjaxOutput() {
    request1().then(function(data){
      // get data from request 1 and pass to request 2
      return request2(data);        
    })
  .then(function(data){
   // get data from request2
    $('#output').text(JSON.stringify(data));
  })
    return false;
}

try it https://jsfiddle.net/je7wf4ww/

and if u want to return plain result from getAjaxOutput - u simply can't (without making request sync of course) - u need to return promise which is a wrapper around ajax call and chain it again with then

How to return multiple values from an ajax success event

3 Answers3