Question

var id = $(this).children().html();  // id is 5
$.ajax({
   url: 'ajax.php?id=' + id,
   success: function(data) {
      id = data;   // id is 1
   }
});
if(id == 1){    // id is again 5
   ...
}

Why in the following example I can’t reinitialize the id variable? What is wrong?

Thanks.

Answer 1

The $.ajax() function has to go and get the data, it hasn’t done this and executed your success callback by the time it reached the code immediately after.

Your code order actually happens like this:

var id = $(this).children().html();
//Ajax start
if(id == 1){ }
//Ajax end (sometime later, not immediately after)
function(data) { id = data; }

If you are depending on this value to continue, stick it in the success callback:

var id = $(this).children().html();  // id is 5
$.ajax({
   url: 'ajax.php?id=' + id,
   success: function(data) {
      id = data;   // id is 1
      if(id == 1){    // id is now 1
        ...
      }
   }
});