I've been making some ajax function these days, and I'm facing a small problem. I have a function that calls an ajax. I want to give it a value, and return that function when the request is done. How do I either:

• Trigger the return from the ajax sub functions
• Wait for the "answer" var to change and then return it

Here's the spirit (indeed, it cannot work) :

var answer = null;
    $.ajax({
        url: "validate/"+id,
        type: 'POST',
        data: {'field' : value},
        success: function(data) {
            //noty({text: data, type: 'success'});
        },
        error:function (xhr, ajaxOptions){
            noty({text: xhr.status + " : " + xhr.responseText, type: 'error'});
            answer = "error";
        } 
    });

return answer;

Thank you!

I've been making some ajax function these days, and I'm facing a small problem. I have a function that calls an ajax. I want to give it a value, and return that function when the request is done. How do I either:

• Trigger the return from the ajax sub functions
• Wait for the "answer" var to change and then return it

Here's the spirit (indeed, it cannot work) :

var answer = null;
    $.ajax({
        url: "validate/"+id,
        type: 'POST',
        data: {'field' : value},
        success: function(data) {
            //noty({text: data, type: 'success'});
        },
        error:function (xhr, ajaxOptions){
            noty({text: xhr.status + " : " + xhr.responseText, type: 'error'});
            answer = "error";
        } 
    });

return answer;

Thank you!

• javascript
• jquery

• You make the function accept a callback, which is called inside the error handler and pass the answer value to it, like you do it with noty. You cannot return a value from an asynchronous function call. Or better yet: Use deferred objects: api.jquery./category/deferred-object – Felix Kling Commented Jun 19, 2012 at 13:49
• Wow, that kind of way to do it is so strange to me... I'll try it – Gabriel Theron Commented Jun 19, 2012 at 13:50
• Well, you can if you make a blocking call, but it would be unwise, as it blocks browser UI for the period of request – poncha Commented Jun 19, 2012 at 13:50

2 Answers 2

You can't return values from an AJAX function, as an AJAX request happens asynchronously (think how long it takes to retrieve a remote webpage).

Instead you need to provide a callback (a function which is executed when the request pletes):

function ajaxFunction(onComplete) {
    $.ajax({
        url: "validate/"+id,
        type: 'POST',
        data: {'field' : value},
        success: function(data) {
            //noty({text: data, type: 'success'});
            onComplete(data);
        },
        error:function (xhr, ajaxOptions){
            noty({text: xhr.status + " : " + xhr.responseText, type: 'error'});
            onComplete(error);
        }
    }
}

You'd then pass a function as a parameter to ajaxFunction, which will receive the response from the AJAX request.

ajaxFunction(function (answer) {
    // do something with answer
});

As you need an id and value parameter, you could add those to arguments of the ajaxFunction method.

Use async: false flag - see the jQuery.ajax documentation for reference.

Note that in jQuery 1.8, the use of async will be deprecated.

var answer = null;

$.ajax({
    url: "validate/"+id,
    type: 'POST',
    data: {'field' : value},
    success: function(data) {
        //noty({text: data, type: 'success'});
    },
    error:function (xhr, ajaxOptions){
        noty({text: xhr.status + " : " + xhr.responseText, type: 'error'});
        answer = "error";
    },
    async: false
});

return answer;