Waiting for $.post to finish

Question

It appears that my script does not want to wait for the $.post call to finish. Thats a problem. Here is some pseudo code:

<script type="text/javascript" language="javascript">
$(document).ready(function(){
  // Global var, to be used everywhere in the ready scope 
  // Note its default value!    
  var test = false;
  $.post('test.php',{},function(result){
   if(result=='yes')
   {
    // This gets executed!
    alert('Its true! Hurraaay!');
    test = true;
   }
   else
   {
    test = false;
   }
  }

  if(test==false)
  {
   // THIS gets executed, despite the fact that we set test to true!
   alert('Awww....');
  }
  // it reaches this, showing us that there was no error!
  alert('Im alive!!!');
  // and a whoooole bunch of other code here...
}
</script>

What is the best way to make sure that my Post call is finished before continuing, without hanging the browser? Hoping for something that is not too messy. :)

Provide a callback function. Ajax is **asynchronous**, the browser will not wait until the response is received! — Felix Kling, Jun 03 '11 at 18:12
@zod - adding brackets around the rest of my code would make it really ugly, is that the only way though? — Jeff, Jun 03 '11 at 18:13
@jeff - working code is better than nice looking code (but not much) — zsalzbank, Jun 03 '11 at 18:14
@Jeff: I think what @zod means is that you are missing brackets. Your code has syntax errors. — Felix Kling, Jun 03 '11 at 18:14
@Jeff - instead of using an anon function you could create a function to handle the callback and thereby keep it a bit cleaner — Matthew Nessworthy, Jun 03 '11 at 18:14
You should indent your code more. Use at least 2 spaces (perhaps 4). To give you a better overview! — PeeHaa, Jun 03 '11 at 18:16
It was pseudo code, didnt check it, I have working code, the problem is just that my script is not waiting for my post call :9 — Jeff, Jun 03 '11 at 18:17

score 4 · Accepted Answer · answered Jun 03 '11 at 18:12

4

Not too messy is using callbacks properly.

Just create some function outside the .post() call and call it inside .post() when you think it is appropriate. You make many callbacks and use them inside the AJAX calls in a really flexible way.

In your case, because you only call alert(), there is no need to create additional functions - just call alert() inside .post() call. If your code gets bigger, consider creating separate functions.

This is how JavaScript and asynchronous calls work. Get used to it and use its power to write very clean and maintainable code.

answered Jun 03 '11 at 18:12

Tadeck

132,510
28
152
198

So define a function at the top of the code, and use it as the callback instead of the anon function? – Jeff Jun 03 '11 at 18:18
@Jeff Actually you can do that, but I proposed calling it _from inside_ the anonymous function. That means you can check a condition inside this anonymous function and call either `MyFunction1` or `MyFunction2`, depending on what will be the result of this check. Is it clear enough or you need some example how to do this? – Tadeck Jun 03 '11 at 18:21
@Jeff I am glad it helped :) You can also use one callback, passing either `true` or `false` in your example. If you have additional questions, do not hesitate to ask them. – Tadeck Jun 03 '11 at 18:26

score 2 · Answer 2 · answered Jun 03 '11 at 18:11

2

<script type="text/javascript" language="javascript">
$(document).ready(function(){
  // Global var, to be used everywhere in the ready scope 
  // Note its default value!    
  var test = false;
  $.post('test.php',{},function(result){
   if(result=='yes')
   {
    // This gets executed!
    alert('Its true! Hurraaay!');
    test = true;
  // it reaches this, showing us that there was no error!
  alert('Im alive!!!');
  // and a whoooole bunch of other code here...

   }
   else
   {
    test = false;
   // THIS gets executed, despite the fact that we set test to true!
   alert('Awww....');

   }
  }
}
</script>

answered Jun 03 '11 at 18:11

morpheus

18,676
24
96
159

this is closer, but not right either. you are missing end paren on the last two lines. – zsalzbank Jun 03 '11 at 18:13
it would be even better to wrap it in a anonymous function the keep the scope nice and clean. Considering the fact that most of the time you place the code in one `$(document).ready(function(){` – PeeHaa Jun 03 '11 at 18:15

score 0 · Answer 3 · answered Jun 03 '11 at 18:11

0

Yes, it does not wait. see here:

http://fixingthesejquery.com/images/ajax101.png

and here:

http://fixingthesejquery.com

answered Jun 03 '11 at 18:11

Matt Evanoff

966
4
9

score 0 · Answer 4 · answered Jun 03 '11 at 18:19

Too messy? If you indent more than one space everything is much more readable and still works fine.

var test = false; // NOW it's global

// Just so we can use the method again
function postSomething() {
  $.post('test.php', {}, function(result) {
    if(result === 'yes') {
      alert('Its true! Hurraaay!');
      test = true;
      alert('Im alive!!!');
    } else {
      test = false;
      alert('Awww....');
    }
  });
}

$(document).ready(function() {
  postSomething();
});

Hideous though it is.

score 0 · Answer 5 · answered Jun 03 '11 at 20:06

The JQuery .post() method asynchronously connects to your server script. You utilize the callback feature in order for the program to make use of the data once the response is returned from the script.

Instead of attempting to processing the data synchronously after the call to post, process the data when the response is received. Utilize functions to make your code more readable.

$(function() {
    postTest();
});

function postTest() {
    $.post(
        'test.php',
        {},
        function(response) {
            if(response == 'yes') {
                testSuccess();
            } else {
                testFailure();
            }
        }
    ); 
}

function testSuccess() {
    alert("Success");
}

function testFailure() {
    alert("Failure");
}

Waiting for $.post to finish

5 Answers5

Linked