Asynchronous Ajax Logic

Question

$("#container").on("change", "#control1", function() {
    if ($("#checkData").val()) {
        $.get("/Controller/CheckData/" + $("#control2").val(), function(data1) {
        if(!data1.Success) {
           alert("Unable to do POST.");           
           return;
        });
    };
    formData = $("#form").serialize();
    $.post("/Controller/PostData", formData, function(data2) {
        // Do something...
    });
}

If checkData is false, the form should post. If checkData is true, the form should only post if the get returns true.

This doesn't seem to work because the form gets posted while the alert dialog is still open. I think it may be due to the asynchronous nature of AJAX. Is this correct?

Please put a better title on your question. The current title could be the name of a book. — Robert Harvey, Jan 13 '14 at 21:05
I've been struggling with what to name this. Give me a few minutes longer. — Fred Chateau, Jan 13 '14 at 21:06
The way you have it written right now, the form will be posted regardless of what happens in your `if` statement. — sbeliv01, Jan 13 '14 at 21:08

score 3 · Answer 1 · answered Jan 13 '14 at 21:08

Yes. When you call the $.get() method, the code continues executing. That means that it immediately goes to the declaration and $.post() call that follow. If you want to wait to execute those until after the $.get() call completes, you'll need to put them in the callback function.

score 2 · Accepted Answer · answered Jan 13 '14 at 21:10

2

yes, the post will always happen because you haven't done anything to prevent it. If you want the post to be sent or not sent based on the outcome of the $.get, you'll need to move it to the get callback fn.

Additionally, your code was riddled with syntax errors, though I suspect many of them were copy paste errors otherwise you wouldn't have even been getting the alert.

$("#container").on("change", "#control1", function () {
    if ($("#checkData").val()) {
        $.get("/Controller/CheckData/" + $("#control2").val(), function (data1) {
            if (!data1.Success) {
                alert("Unable to do POST.");
            } else {
                var formData = $("#form").serialize();
                $.post("/Controller/PostData", formData, function (data2) {
                    // Do something...
                });
            }
        });
    }
});

answered Jan 13 '14 at 21:10

Kevin B

94,570
16
163
180

OK, here's the deal... The post above runs about 10 lines of code long. I was trying to find a way to avoid repeating it twice. – Fred Chateau Jan 13 '14 at 21:13
On second thought, The way it was revised, I think I can avoid that. There is an if before the first if followed by an else and two more ifs but I think this heads me in the right direction. – Fred Chateau Jan 13 '14 at 21:16
Well, it doesn't work because post should occur if checkData is false. If checkData is false, the form should post. If checkData is true, the form should only post if the get returns true. I repeated the post twice and that works. – Fred Chateau Jan 13 '14 at 22:18
I see. In that case, abstract the post behind a function and execute the function in two places. Only way to avoid the repeat without adding too much complexity. Another way that would cause too much complexity in my opinion would be to use a deferred object that either resolved instantly if it was false, or resolved after the get was complete. – Kevin B Jan 13 '14 at 22:21

score 1 · Answer 3 · answered Jan 13 '14 at 21:08

1

Yes, you'll allways get to $.post...

answered Jan 13 '14 at 21:08

Chen Kinnrot

20,609
17
79
141

score 1 · Answer 4 · edited May 23 '17 at 11:44

1

Yes. And you cannot return from a callback. You will need to do

$("#container").on("change", "#control1", function () {
    if ($("#checkData").val()) {
        var formData = $("#form").serialize();
        $.get("/Controller/CheckData/" + $("#control2").val(), function (data1) {
            if (!data1.Success)
                alert("Unable to do POST.");
            else
                $.post("/Controller/PostData", formData, function (data2) {
                    // Do something...
                });
        });
    }
});

Btw, it might be unsafe to rely on a client-side check of the data (even if by ajaxing /CheckData/) before "allowing" a POST request. If you want a two-step process, you should return a "safety" token from the GET request.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 13 '14 at 21:12

Bergi

630,263
148
957
1,375

I'm trying to pull a number from the page, do a lookup of it in a database, to determine if the post is allowed. This is a drag and drop operation, so it has to allow/prohibit the drop in one action. – Fred Chateau Jan 13 '14 at 21:32
What would happen if a client did POST some arbitrary data to you server without having looked anything up? – Bergi Jan 13 '14 at 21:45

score 1 · Answer 5 · answered Jan 13 '14 at 21:21

Please note that these two lines are reversed in your code (and therefore don't match up):

$("#container").on("change", "#control1", function() {
    if ($("#checkData").val()) {
        var c2 = $("#control2").val();
        $.get("/Controller/CheckData/" + c2, function(data1) {
        if(!data1.Success) {
           alert("Unable to do POST.");           
           return;
        } <=== HERE
        }); <=== HERE
    };
    formData = $("#form").serialize();
    $.post("/Controller/PostData", formData, function(data2) {
        // Do something...
    });
}

I extracted var c2 from the $.get line only to see the braces more easily, not for any other reason.

I would like to post the actual code (which I should have done in the first place.) but I'm not sure if I should edit the top post or add it at the bottom. — Fred Chateau, Jan 13 '14 at 21:41

Asynchronous Ajax Logic

5 Answers5