CODEWITHSUNDEEP
javascriptjqueryajax
Ali
Ali

Reputation: 3461

jQuery ajax function undefined result

I realize this is asked a lot and usually the answer is that AJAX is asynchronous and this is why it's returning undefined, but even though I set my async to false here, it's still returning undefined when the function is called. res is always undefined

function sendRequest(link, type, query) {
    $(document).ready(function(){
        $.ajax({
            'url' : link,
            'type' : type,
            'data' : query,
            'async' : false,
            'dataType': "json",
            'headers': {
                'Cache-Control':'max-age=0',
                'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
                'Content-Type':'application/x-www-form-urlencoded',
                'Accept-Language':'en-US,en;q=0.8,ar;q=0.6',
            }, 
            'success': function(data) {
                var res = data;
            }
        });
    });
    return res;
}

Also I am sure that the request is being sent correctly and that the response is received correctly as well

Upvotes: 0

Views: 204

Answers (5)

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123463

You'll have to declare and assign res separately.

var res;

$.ajax({
    // ...
    'success': function (data) {
        res = data;
    }
});

return res;

Currently, res is being declared as a local variable solely inside the success callback. So, it won't be accessible to the rest of sendRequest().

Though, you should try to avoid using async: false with Ajax.

You can instead return the Deferred jqXHR provided by $.ajax(), allowing the calling function to add its own handler.

function sendRequest(link, type, query) {
    return $.ajax({
        // ...
    });
}

sendRequest(...).done(function (data) {
    // ...
});

More details and options are described in "How to return the response from an AJAX call?"

Upvotes: 2

Bart Jedrocha
Bart Jedrocha

Reputation: 11570

I think a better approach would be to have your sendRequest function return a jQuery Promise Object. As an example

function sendRequest(link, type, query) {
  return $.ajax({
        'url' : link,
        'type' : type,
        'data' : query,
        'dataType': "json",
        'headers': {
            'Cache-Control':'max-age=0',
            'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
            'Content-Type':'application/x-www-form-urlencoded',
            'Accept-Language':'en-US,en;q=0.8,ar;q=0.6',
        }
    });
}

To use

sendRequest('/someurl', 'GET', {}).done(function(data) {
  // do whatever you need with data here
});

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

AJAX is async (at least it should be, I would refrain from using async set to false), so the result will be undefined. Use a callback:

function sendRequest(link, type, query, callback) {
    $.ajax({
       ..
       ..
       'success': function(data) {
            callback(data);
        }
    });
}

sendRequest(link, type, query, function(data) {
    console.log(data); //YOUR DATA
});

Upvotes: 0

mmm
mmm

Reputation: 2297

It's a scope problem. You need to declare var res; in a scope that's accessible to the return, and just update that object inside of the AJAX.

function sendRequest(link, type, query) {
    var res;
    $(document).ready(function(){
        $.ajax({
            //...
            'success': function(data) {
                res = data;
            }
        });
    });
    return res;
}

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

Firstly res should be outside ajax scope, and Secondly function will return before ajax call completes thats the reason its undefined:

 $(document).ready(function(){
        $.ajax({
            'url' : link,
            'type' : type,
            'data' : query,
            'async' : false,
            'dataType': "json",
            'headers': {
                'Cache-Control':'max-age=0',
                'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
                'Content-Type':'application/x-www-form-urlencoded',
                'Accept-Language':'en-US,en;q=0.8,ar;q=0.6',
            }, 
            'success': function(data) {
                MyFunction(data);
            }
        });


function MyFunction(data)
{

// do with ajax resonse what is needed
}

Upvotes: 0

Related Questions