0

basically I'm having issues making my program wait for the AJAX request to be completed. I cant seem to get the return value to be anything besides undefined in the test() function in the example code below where it calls getFriends(). I can make it works fine setting async to false in the ajax call but as this is deprecated I want to avoid this solution.

I have tried using deferred to solve the issue and so many other options that I have found on stack overflow with no luck so I have come to the conclusion that I am likely using deferred wrong or (less likely) deferred is not an option here and so I am hoping one of the talented people on this site can help me!

Check out my code below; its a simple version of what i have running. Thanks in advance!

//function that shows how the function with issue should be called/used
function test(){
    var result = getFriends(127, 1); //this is getting a result returned before ajax is done so the result is undefined

    //do stuff with result data
    console.log(result);
}


//function that creates a data object and calls my custom ajax function
function getFriends(user_id, page_no){

    //create data object containing given parameters and a data type parameter
    var data = {
        page_no: page_no,
        profile_id: user_id,
        request_type: 'get_friends' 
    };

    //call friendAjax to get users friends
    var response = friendAjax(data, 'kv_people_feed');
    return response;
}



//Used for all friend related ajax requests. Accepts a data object to be sent as parameters and otional url.
function friendAjax(data, url){
    url = typeof url !== 'undefined' ? url : 'friendsLibrary'; //allows optional url param
    $.ajax({
        // async: false,
        url: Config.home + '/' + url + '/', //dynamic url
        data: data,
        dataType: 'jsonp',
        success: function(response){
            console.log(response);
            return response;
        }
    });
}
Mark183
  • 126
  • 6

1 Answers1

1

The problem is that $.ajax is performed asynchronously. friendAjax() is returning before you the ajax call. Additionally, the return you have is returning within the anonymous function for success.

You can add a call back to friendAjax to fix this.

function friendAjax(data, url, callback){
    url = typeof url !== 'undefined' ? url : 'friendsLibrary'; //allows optional url param
    $.ajax({
        // async: false,
        url: Config.home + '/' + url + '/', //dynamic url
        data: data,
        dataType: 'jsonp',
        success: function(response){
            console.log(response);
            callback(response);
        }
    });
}

And then when you call it:

friendAjax({}, "http://wherever.com", function(data){
    // Data will be defined here.
    console.log(data);
}
Jordan Soltman
  • 3,795
  • 17
  • 31
  • You should just return the promise. – Bergi Dec 03 '15 at 04:59
  • Thanks for your response. I added the callback as you described and I have moved the return into the "Data will be defined here." section but im still getting undefined result in test() :/ – Mark183 Dec 03 '15 at 05:11
  • 1
    Try adding the console.log as I did above and see if it outputs anything. You can also look at promises as Bergi suggested. It's all laid out pretty elaborately here: http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – Jordan Soltman Dec 03 '15 at 05:14
  • I added the console log and its returning the data perfectly. I think the issue now is that the test() function is not waiting for getFriends() to return. Would this mean i need another callback so test waits possibly? I tried promises earlier and it basically got me to this same point but i will check out the link anyway in case i missed something. – Mark183 Dec 03 '15 at 05:22
  • You are correct. Because it is async it will not wait. – Jordan Soltman Dec 03 '15 at 05:22
  • haha yeh so it was async. my issue now is that its a never ending spiral of asynchronicity as test() is now async and i dont want to put everything in the callback anonymous function within test(). Any suggestions? If not that's cool and i appreciate your help. :) – Mark183 Dec 03 '15 at 05:39
  • Well.. This now comes down to architecture decisions which is a much bigger issue. Can your code do other things and then inject whatever info it gets later on? – Jordan Soltman Dec 03 '15 at 05:51
  • Had a good think about it and am going to keep it as it is now. Thanks again for your help! – Mark183 Dec 03 '15 at 06:45