External functions running before ajax inside a function

[jcanker]

I am working on some AJAX that double checks that a user is logged in by sending an AJAX to PHP. The ajax/xml return is working fine; however, When I was testing with alert statements, I noticed that an alert that is called **AFTER** the function containing the ajax runs **AFTER** the function starts but BEFORE the AJAX call contained within the function.

 

In other words, the alerts arrive in this order

 

 

Alert that is set in document.ready to check initial setting: userData logged is: "+userData.logged

 

**call the function**

 

Alert that is set inside the function We're starting checkLogged Function now

Alert that is set inside the function userData at start of functionis: "+userData.logged

 

Alert that is set outside the function and appears after the original function call:alert("after checklogged, userData logged is: "+userData.logged);

 

Alert that is set inside the AJAX call inside the original function: "we got the page!"

Alert that is set inside the AJAX.done inside the original function: after setting userData logged, userdata logged is: "+userData.logged

 

The values show up as expected (of course the value for the 4th alert is still 0 because the AJAX hasn't run yet.

 

I suppose I could put the rest of the script inside an if that looks for a TRUE return, but I don't want to do that because I'm just hiding the symptom rather than addressing the cause.

 

Why are additional lines being allowed to run before the function finishes what it's doing, namely the AJAX call?

 

The code is:

function checkLogged(userData){
//////////////////////////////////
// this function makes AJAX call to
// checkLogged.php and verifies that
// the user actually is logged on then
// retrieves the user's personal info
//////////////////////////////////////////////
alert ("We're starting checkLogged Function now");
alert("userData at start of functionis: "+userData.logged);



$.ajax({
url: "../php/checkLogged.php",
type: "POST",
dataType: "xml"
}).done(function(xml){
alert("we got the page!");
//find the userinfo and set the userData object

logged = $(xml).find("logged").text();

userData.logged = logged;
alert("after setting userData logged, userdata logged is: "+userData.logged);

}).always(function(){
// alert("we're in the always block now");
}).error(function(){
alert("We had an error retrieving the page");
});//end of ajax

}//end function checkLogged

/////////////////////////////////////////////////////
// load all the functions needed at startup here
///////////////////////////////////////////////////////
$(document).ready(function() {



//intialize a blank userData object
var userData ={logged:0,
fName:"",
lName:""};
alert("userData logged is: "+userData.logged);


//double check that they're logged in and not just landing here on their own
checkLogged(userData);
alert("after checklogged, userData logged is: "+userData.logged);


});//end document.ready(function)

Edited February 7, 2013 by jcanker

[jcanker]

For anyone stumbling on this later on because they're looking for an answer....

 

I resolved the issue by adding async:false to the ajax call. This, I guess makes in synchronous and forces everything to wait until the AJAX call is done (but doesn't that make it a SJAX call?

[requinix]

Exactly.

 

If your code has to run linearly then it means you have something that relies on the AJAX call. A better solution would be to move that reliant code into the AJAX callback:

statement 1; // 1
statement 2; // 2
ajax(function() {
   ajax statement 3; // 5
   ajax statement 4; // 6
});
statement 5; // 3
statement 6; // 4

becomes

statement 1;
statement 2;
ajax(function() {
   ajax statement 3;
   ajax statement 4;

   statement 5;
   statement 6;
});