Why won't this jQuery function perform properly? (Revised)

Question

(Didn't mean to create a new question, but revised the old one enough that the answers don't make sense, and now there's a new problem)

I'm a total noob when it comes to jQuery but I am trying to learn. What in tarnation am I doing wrong here?

function MakeCall(url) { 
var result;
$.ajax({
    url: url,
    dataType: "text",
    success: function(txt) {
        result = txt;
        alert(result);
        return;
    }
});
alert(result);
return result;
}

my problem is that the first alert returns the correct value, but the second alert is returning "undefined" and it pops up BEFORE the first alert, even though the result is getting set properly in the success function... sigh... what am I doing wrong? :(

Thanks so much...

Answer 1

Jquery's ajax functions are asynchronous - therefore the success function will be called after the second alert is run. It will then return from the function before the ajax method is completed.

If you really want to build the app this way, you can add an async option to the call, setting it to false. (http://docs.jquery.com/Ajax/jQuery.ajax#options, see the first entry.) This will result in the success function being called before the $.ajax method returns.

However, doing blocking ajax calls is not recommended, as it will hang the script and the browser.

Therefore, I advise you to restructure the application as such:

function MakeCall(url, callback) { 

$.ajax({
    url: url,
    dataType: "text",
    success: callback
});

}

MakeCall('http://theurl.com', function(txt) {
        result = txt;
        alert(result);
        return;
});

Answer 2

Ajax is asynchronous, and it doesn't block the flow. So it works like this:

• You call $.ajax, request is sent to server
• Code proceeds to the alert after the $.ajax call, and since it still hasn't finished the request the result variable is still undefined
• After a while, the request finished and the alert in the success function is called with the result

jQuery has a flag you can use to make a request synchronous, but it's usually considered bad practice to do this.

Answer 3

There's no nice concept of "waiting" when using XHR (OK, yes, you can make it synchronous, but it'll lock up the browser something fierce). Instead, you utilize the fact that functions can be easily passed as parameters in javascript.

The key here is that the "success" function you've defined won't run until the call comes back from the server, but the rest of your javascript keeps on chugging, triggering the undefined alert you're seeing (and running any code that called this function, etc).

Instead of returning the data from the function, you have to alert the function caller when data has arrived. You can do so by adding a second parameter, the function to call when the server request completes:

function MakeCall(url, functionToRunWhenDataArrives) { 
  $.ajax({
    url: url,
    dataType: "text",
    success: functionToRunWhenDataArrives
  });
}

MakeCall('myurl.com', function(txt){
   // do stuff with txt here!
});

This is the type of pattern you'll have to follow anytime you make an async request.