Dmitry
Dmitry

Reputation: 14622

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

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.

Upvotes: 3

Views: 189

Answers (5)

Timoth&#233;e Groleau
Timoth&#233;e Groleau

Reputation: 1960

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

Upvotes: 1

jbl
jbl

Reputation: 15403

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

Upvotes: 0

MildlySerious
MildlySerious

Reputation: 9170

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

Upvotes: 0

Curtis
Curtis

Reputation: 103368

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.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039000

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

Upvotes: 1

Related Questions