return boolean on done using jQuery ajax

Question

I have a container method for an ajax request:

function postRating(formData) {
    $.ajax({
        type: "POST",
        url: '/api/ratings',
        data: formData
    })
        .done(function () {
            return true
        })
        .fail(function () {
            return false
        })
        .always(function (msg) {
            //console.log(msg);
        });
}

which is called like so:

$('.episode-rating.like').click(function () {
    var formData = $("#episode-rating").serializeArray();
    formData.push({name: 'up', value: 1}, {name: 'down', value: 0});
    console.log(postRating(formData))
});

However postRating() returns undefined. Not sure what I'm doing wrong. I want to do some html processing if the ajax request is successfull and show an error otherwise.

Ah so that means when `postRating()` is called it won't wait for a callback? — Nick, Jan 27 '15 at 13:48
Yes it wont wait. It will be executed immediately and it would return the default return value `undefined` — Rajaprabhu Aravindasamy, Jan 27 '15 at 13:49

score 4 · Accepted Answer · answered Jan 27 '15 at 13:52

It is async, as mentioned above, so use callback:

function postRating(formData, cb) {
    $.ajax({
        type: "POST",
        url: '/api/ratings',
        data: formData
    })
        .done(function () {
            cb(true);
        })
        .fail(function () {
            cb(false);
        })
        .always(function (msg) {
            //console.log(msg);
        });
}

And then:

postRating(formData, function(result){
    console.log(result);
})

Or you can use promises:

function postRating(formData, cb) {
    return $.ajax({
        type: "POST",
        url: '/api/ratings',
        data: formData
    });
}

and then:

postRating(formData)
   .done(function(){
        console.log(true);
    })
   .fail(function(){
        console.log(false);
    });

Konstantin Dinev · Answer 2 · 2015-01-27T13:55:49.877

0

This is an async call. If you want you can make your ajax call sync and then you can return from the container, otherwise you would have to implement callbacks on the container, which are invoked upon success, error and complete.

// Async = false
function postRating(formData) {
    return $.ajax({
        type: "POST",
        url: '/api/ratings',
        data: formData,
        async: false
    });
}

// Callbacks
function postRating(formData, successCallback) {
    $.ajax({
        type: "POST",
        url: '/api/ratings',
        data: formData,
        success: function (data) {
            successCallback.apply(this, [data]);
        }
    });
}

edited Jan 27 '15 at 13:55

answered Jan 27 '15 at 13:48

Konstantin Dinev

34,219
14
75
100

Do you have an example? – Nick Jan 27 '15 at 13:50
@Ortix92 I added an example. – Konstantin Dinev Jan 27 '15 at 13:56
But you should think twice before using `async: false`. It is not a good practice. – Roman Bekkiev Jan 27 '15 at 14:01

return boolean on done using jQuery ajax

2 Answers2