CODEWITHSUNDEEP
javascriptjqueryajax
Fred Chateau
Fred Chateau

Reputation: 879

Asynchronous Ajax Logic

$("#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?

Upvotes: 2

Views: 101

Answers (5)

cssyphus
cssyphus

Reputation: 40038

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.

Upvotes: 1

Bergi
Bergi

Reputation: 664548

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.

Upvotes: 1

Kevin B
Kevin B

Reputation: 95022

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...
                });
            }
        });
    }
});

Upvotes: 2

Brian Warshaw
Brian Warshaw

Reputation: 22984

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.

Upvotes: 3

Chen Kinnrot
Chen Kinnrot

Reputation: 21015

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

Upvotes: 1

Related Questions