jQuery $.POST only works when some function executed after it.

I have this jQuery project that is almost complete, for the final portion when the user's data has been succeesfully validated, it executes an external PHP script using the $.post function, passing as parameters the user entered info.

My problem though is that my callback function only works if i put an alert function after it.

Works:

$.post("backend.php", dataString, 
    function(response) {
        if (response=="1") {
            alert("ok"); 
        }
    }, 'html'); 

alert('test');

But if i don't put that alert after the closing tag, my script doesnt do the alert "ok", or anything else in the callback.

Do any of you see what's wrong w/ my code?

Thanks!

Answers


My guess is that there's something that comes after the $.post() script that either causes the page to change or causes the post to be stopped or fail.

Fundamentally, all the alert('test') does is block your code waiting for the OK button to be pressed. The only way that could make your code suddenly work is if there is something executing in your code after that second alert that messed up the post.

Remember the post is asynchronous. It will happen in the background while any other code you have runs and only when it succeeds will the alert('ok') run.

So, my guess is that something else in your page is running and messing up the post.


So I'm late to the party here, but I faced what seemed to be the exact same issue here and eventually found a resolution. In my case, I had a form submit button that I was also attempting to use as a trigger for a JQuery POST call. The problem was that when the form was submitted, it apparently cancelled the JQuery POST call.

In my case, the resolution was to change the submit button to just a regular button, and then perform the form submit in the same JQuery function as as the POST call -- after the POST call. I also needed to introduce a small delay to the call of the form submit. So, it looked like this:

$("#saveStuff").click(function () {  //my save button, no longer a submit
        $.post('UpdateStatusFlag', {}, function (data) {
              //some irrelevant stuff here
            }
        });
        setTimeout("$('#MyForm').submit()", 100); //needed the small delay to allow the post call to complete
});

Hope this helps a few people out there making the same mistake I did.


Very subtle trap for young players here (such as myself). I was doing exactly the same thing, posting on a submit event of a form. Of course, the form submits and the post posts at the same time, so when the post's response comes back, the form has refreshed and reset itself. Confusion reigns.

In my case, I did not really want the form to actually submit anyway, so adding return false; as the final statement in my submit function sorted it out nicely.

E.g.:

$('#myForm').submit(function() {
    $.post('myurl',{some params});
    return false;
};

Need Your Help

Page redirects to homepage after data insertion from form in database

php html forms mysqli

I don't know why my page redirects to my homepage after submission of data to database from form. The data is submitted succesfully but rather going to submit page it goes to my homepage i.e www.xx...