jQuery global variable problem

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.

Answers:

Answer

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

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

your if statement executes before your .ajax call completes

Answer

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

Answer

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

;)

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.