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.

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.

• javascript
• jquery
• variables
• initialization
• global-variables

Share Follow asked Mar 2, 2010 at 19:35 EmanuelEmanuel 6,9722020 gold badges6060 silver badges7979 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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

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.

your if statement executes before your .ajax call pletes

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

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

;)

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.