Real synchronous ajax call

Question

I have a situation, where I do not know if I am approaching correctly, but here it goes: I want a second POST to happen, but only if the first POST says OK.

function save_match(slot, save) {
    listItems.each(function(idx, li) {
        var player = $(li);
        if(i >= 0) {
            // do some work
        } else {
            // post that should prevent second post from executing, depending on `return_msg`
            $.post(..., function(return_msg) {
                    if(return_msg == "not_ok") {
                        // I did this in hope that it will do the trick, but no
                        location.reload();
                    }
                }
            );
        }
    });

    // do a little work

    $.ajax({
        ...
    });
}

I tried to put a busy loop, but this will freeze the browser. I want to make the first POST call synchronous (which however won't let the //do some work execute, until the POST returns, which in 93% it returns ok, but I can't see another alternative, if you can, please let me know), so that the second POST won't happen if the return of the first call is not ok.

So, I found this question: how to make a jquery “$.post” request synchronous, which says that it's top answer is deprecated and gives something that will block UI. However, I want to block the code from executing the second call!

How to do this in year 2015?

You're alerting "Error!" when `return_msg` is NOT equal to `not_ok`. If the message is either `ok` or `not_ok` that's where you want your second post, and it seems you already know how to post. — Popnoodles, Sep 15 '15 at 17:43
you can use async techniques to make the 2nd request wait for the 1st, no need to stall the browser UI to do so. — dandavis, Sep 15 '15 at 17:47

score 1 · Accepted Answer · answered Sep 15 '15 at 17:43

One way is to make the ajax synchronous which is not recommended. You can set async: false on ajax call.

Another way is to put one ajax request in the success callback of another. A simple example would be:

$.ajax({
    url: "ajaxUrl",
    type: "post",
    success: function (data) {
        if (data == "OK") {
            //do other ajax
        }
        else {

        }
    },
    error: function (jqxhr) { }
});

For your situation, the example above would probably be enough. For a more robust and scalable solution you can use jQuery.Deferred. A simple example for your situation:

var def = $.Deferred(); //Create $.Deferred;

$.ajax({
    url: "ajaxUrl",
    type: "post",
    success: function (data) {
        if (data == "OK")
            def.resolve(); //Let deferred know it was resolved with success
        else
            def.reject(); //Let deferred know it ended in a failure
    },
    error: function (jqxhr) { }
});

def.done(function () {
    //this will only run when deferred is resolved
}).fail(function(){
    //this will only run when deferred is rejected
}).always(function(){
    //this will run when deferred is either resolved or rejected
})

`async:false` is what the answer mentions in my question!!! The `def` method seems nice. Can you please describe what's `jQuery.Deferred`? It's not clear from the documentation, although I understand what it does. I worry about it's complexity (will it make my application more heavy for example?). I will check back tomorrow! — gsamaras, Sep 15 '15 at 17:47
There are extensive documentations about jQuery.Deferred. Google and jQuery site can help you more than I ever could here. As I say, for your situation, the first example offers you a simple solution. Do the second ajax only if the first returns OK. — Ozan, Sep 15 '15 at 17:51

score 1 · Answer 2 · answered Sep 15 '15 at 17:45

You're alerting "Error!" when return_msg is NOT equal to not_ok. If the message is either ok or not_ok that's where you want your second post, and it seems you already know how to post.

    $.post(..., function(return_msg) {
            // check for the success, as null or something else would be an error too
            if(return_msg == "ok") { 
                // This is where you would do another post
                $.post(..., function() {});
            } else {
                // This is where the error should be.
            }
        }
    );

Real synchronous ajax call

2 Answers2