Why does `$.post` works only if `alert()` presents after it?

Question

I have the following javascript code:

$.post("<receiver>", postdata);

And gets postdata not always. If I write the following code all works good:

$.post("<receiver>", postdata);
alert('bla-bla-bla, read me for a second');

Why? The page is changing on the save button as the javascript runs. But I need to send post data before redirecting.

Have a look at this question for an extensive explanation: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call-from-a-function. — Felix Kling, Feb 22 '13 at 09:52

score 1 · Accepted Answer · answered Feb 22 '13 at 09:47

You should redirect inside the success callback of your AJAX call:

$.post("<receiver>", postdata, function() {
    window.location.href = '...';
});

The reason why your code works if you put an alert immediately after the $.post call is because when this alert pops up, the browser suspends the execution and your AJAX call has enough time to complete.

Don't forget that the first A in AJAX stands for Asynchronous meaning that you could only consume the results returned from the server inside the success callback.

Also if this AJAX call is performed inside some .submit() event handler of a form or inside some .onclick() handler of a submit button or an anchor you should make sure that you have canceled the default action by returning false otherwise your AJAX call will never have the time to execute before the browser redirects away from the page.

Example:

$('#myForm').submit({
    $.post("<receiver>", postdata, function() {
        ...
    });
    return false; // <!-- That's the important bit
});

score 1 · Answer 2 · answered Feb 22 '13 at 09:53

1

Ah, so it seems that the missing portion of your question is you are sending data on click of something yes? Presumably a link? That link causes the browser to follow it immediately, and in your example the alert is delaying the browser enough that your post has enough time to complete.

You need to ensure that the default action of that link is blocked, and do the redirect in the callback of your $.post() instead:

$("a.some_class").click(function(evt)
{
    evt.preventDefault(); // makes sure browser doesn't follow the link

    // gather your post data here ...

    var $this = this;
    $.post("<receiver>", postdata, function()
    {
        window.location.href = $this.attr("href");
    });
})

answered Feb 22 '13 at 09:53

Timothée Groleau

1,940
13
16

But I need to use standard event handler to pass all parameters to the new page. Is it possible to use preventDefault and then to call Default handler after post again? – Dmitry Feb 22 '13 at 09:55
I need more information: are you indeed clicking a link? what are the "all parameters" you refer to? Do you mean query string parameters? If yes, the code I pasted above uses the original href attribute of the tag. So if that attribute contains query string parameters, they will be sent just nice. In effect, it just delays the default execution of clicking on the link. – Timothée Groleau Feb 22 '13 at 10:00
Is'a the following element without tag: `` – Dmitry Feb 22 '13 at 10:10

score 0 · Answer 3 · answered Feb 22 '13 at 09:47

0

Your alert is causing your script to pause and therefore allowing time for your $.post() to complete.

You should put your redirect script in your $.post() callback.

answered Feb 22 '13 at 09:47

Curtis

101,612
66
270
352

score 0 · Answer 4 · answered Feb 22 '13 at 09:49

because it causes a delay. While you press OK the request (which takes at least a few milliseconds) gets finished and the stuff depending on it can follow.

To prevent this, you can pass a callback function that runs after the request got its response.

$.post( url, postdata, function() {
    // Success.
} )

score 0 · Answer 5 · answered Feb 22 '13 at 09:53

The .post is asynchronous.

If you change page during the post process () the POST request will get aborted. Your alert is preventing this page change

You should replace your .post with a .ajax synchronous request, validating form submission on success ( return true; ) . Or do as suggested by @DarinDimitrov or @Curt

Why does `$.post` works only if `alert()` presents after it?

5 Answers5