jQuery global variable problem

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

Answer 2

The AJAX function is asynchronous. It will run in the background and when it is done getting the ajax.php page it will run the success function.

Answer 3

your if statement executes before your .ajax call completes

Answer 4

The A in Ajax is for Asynchronous. From within the 'success' callback you can call another function or execute post-ajax code.

Answer 5

Refactoring the code like this would work:

function by_id() {
 if(id == 1) {   
   ... do something ...
 }
}

var id = $(this).children().html();
$.ajax({
   url: 'ajax.php?id=' + id,
   success: function(data) {
      id = data;
      by_id();  // call on successful ajax load
   }
});

The advantage of wrapping your id logic in a function allows you to call it anywhere - be it at the end of an AJAX request, at page load, on a button press, etc.

Answer 6

Hey a better solution is using the async: false property, something like this:

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

;)