How to return Jquery ajax call value?

Question

How to return value in function which calls jquery ajax. I approached following method and I dont know whether it is correct or not

function a(){
var a=ajaxFunction();
}

$.ajax({
    url: "Handler.ashx",
    cache: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        _testId = data.Id;
    }

return _testId

});

but in var a, value is undefined. The value of _testId is not returned by using above method. If it is wrong please tell me the right approach.

Mathias Bynens · Accepted Answer · 2012-02-21 10:36:38Z

1

You’ll need to use a callback function, as the A in “Ajax” stands for “asynchronous”.

$.ajax({
    'url': 'Handler.ashx',
    'cache': false,
    'contentType': 'application/json; charset=utf-8',
    'dataType': 'json',
    'success': callback
);

function callback(data) {
  var testID = data.id;
  console.log(testID);
}

You could use an anonymous function to inline it as well:

$.ajax({
    'url': 'Handler.ashx',
    'cache': false,
    'contentType': 'application/json; charset=utf-8',
    'dataType': 'json',
    'success': function(data) {
      var testID = data.id;
      console.log(testID);  
    }
);

All the code that depends on the Ajax results should be handled in the callback.

answered Feb 21, 2012 at 10:36

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2012-02-21 10:39:50Z

0

Because the AJAX call is run asynchronously the return statement will be hit before the call has completed, therefore the value being returned is always undefined.

You need to change your logic to deal with the result of the AJAX call within the success handler ONLY:

$.ajax({
    url: "Handler.ashx",
    cache: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        _testId = data.Id;

        // do whatever you need with _testId in here.
        // You can pass it to another function if you require to modularise your logic, eg.
        processResult(data)
    }
});

function processResult(json) {
    // do stuff with your json here
}

answered Feb 21, 2012 at 10:39

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

JIA · Accepted Answer · 2012-02-21 10:45:46Z

0

I'd probably do this:

var _testID = false;

function a(){
    ajaxFunction();
    if(_testID)
    {
        //Do what you need here
    }
}

$.ajax({
    url: "Handler.ashx",
    cache: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        _testId = data.Id;
    }
});

edited Feb 21, 2012 at 10:45

JIA

1,47513 silver badges11 bronze badges

answered Feb 21, 2012 at 10:41

Alfonso

3261 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to return Jquery ajax call value?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related