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

Improve this question
4
  • 4
    Please put a better title on your question. The current title could be the name of a book. Commented Jan 13, 2014 at 21:05
  • I've been struggling with what to name this. Give me a few minutes longer. Commented Jan 13, 2014 at 21:06
  • 6
    The answer is: Yes. Commented Jan 13, 2014 at 21:06
  • The way you have it written right now, the form will be posted regardless of what happens in your if statement. Commented Jan 13, 2014 at 21:08

5 Answers 5

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

4 Comments

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.
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.
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.
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.
1

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

Improve this answer

Comments

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.

Improve this answer

2 Comments

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.
What would happen if a client did POST some arbitrary data to you server without having looked anything up?
1

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.

Improve this answer

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.