Call a ajax function within a function (jQuery)

Question

    function getCChatStatus() {
    jQuery.ajax({
        type: "POST",
        url: "index.php?page=CChatAction",
        data: { action: "getStatus" }
    }).done(function(msg) {
        var cChatStatus = jQuery.parseJSON(msg);
        return cChatStatus;
    });
}

function CChatOptions() {
    var test = getCChatStatus();
    alert(test);
}

is returning "test is undefined". How to solve this issue? I already tried async: false.

Thanks

possible duplicate of [Return Value from inside of $.ajax() function](http://stackoverflow.com/questions/8187201/return-value-from-inside-of-ajax-function) — JJJ, May 31 '12 at 10:59

adeneo · Answer 1 · 2012-05-31T11:05:47.530

The ajax function is asynchronous and has'nt returned yet when you are calling the alert.

function getCChatStatus(callback) {
    jQuery.ajax({
        type: "POST",
        url: "index.php?page=CChatAction",
        data: { action: "getStatus" }
    }).done(function(msg) {
        var cChatStatus = jQuery.parseJSON(msg);
        callback.call(cChatStatus);
    });
}

function CChatOptions() {
    getCChatStatus(function(test) {
        alert(test);
    });
}

You could also do:

function getCChatStatus() {
    var CChat = jQuery.ajax({
        type: "POST",
        url: "index.php?page=CChatAction",
        data: { action: "getStatus" }
    });
    return CChat;
}

function CChatOptions() {
    var cChatStatus = getCChatStatus();
    cChatStatus.done(function(msg) {
        alert(jQuery.parseJSON(msg));
    });
}

2nd one is working, first one does not seem to work. Thanks anyway! — Chris, May 31 '12 at 11:13

score 1 · Accepted Answer · answered May 31 '12 at 11:00

If you use asynchronous functions like jQuery.ajax, you will have to use callback functions to evaluate the results.

Thus, your getter has to be asynchronous:

function getCChatStatus(callback){
  jQuery.ajax({/*...*/})
  .done(function(){
     callback(jQuery.parseJSON(msg))
  })
}

And your test will have to look like:

function CChatOptions() {
  getCChatStatus(function(status){
    alert(status)
  })
}

score 0 · Answer 3 · answered May 31 '12 at 10:59

Your getCChatStatus() function is not returning anything. Even with async: false, your function needs to return the return value of the $.ajax() call. Consider returning the actual observable object that you get from an async $.ajax() call and working with that, instead of running synchronous AJAX requests.

score -1 · Answer 4 · answered May 31 '12 at 11:04

Try this should work !!

 function getCChatStatus() {
        $.ajax({
            type: "POST",
            url: "index.php?page=CChatAction",
           success:function(msg){
            var cChatStatus = jQuery.parseJSON(msg);
            alert(cChatStatus); //if this alert works then that test will work..
            return cChatStatus;
        });
    }

    function CChatOptions() {
        var test = getCChatStatus();
        alert(test);
    }

Call a ajax function within a function (jQuery)

4 Answers4