Why won't this jQuery function perform properly?

Question

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;
        return;
    }
});
alert(result);
return result;
}

EDIT:

ok, sorry about that bit of stupidity... i've fixed that part. now my problem is that the alert where it is now is returning "undefined", even though the result is getting set properly in the success function...

Thanks so much...

Answer 1

    result == txt;

Should be

    result = txt;

---

Your second problem is that ajax calls are asynchronous. i.e. the alert(result) statement will probably be executed before the success callback function.

You are asking how to prevent this. You can't. It's not a bug. This is what AJAX stands for. If you want something to be executed after the ajax call, add it to the success callback function.

Edit

If you really need the result to be processed in some other function then you can do this:

$.ajax({
    url: url,
    dataType: "text",
    success: function(result) {
        someOtherFunction(result)
        return;
    }
});

Answer 2

The assignment operator in javascript is =

result = txt;

Answer 3

The second returns undefined because nothing is ever assigned to result. As the others say,

change it to

 result= txt;

result==txt is a way to compare, not to assign

Edit-

The second problem is because the javascript will not wait for the ajax to finish before it does its alert . The A in ajax stands for Asynchronous meaning other things will run not wait for the ajax function to finish

Answer 4

This is happening because the alert is happening immediately after the AJAX is dispatched. AJAX is Asynchronous, so simply dispatching the request is not sufficient to populate the result.

Put the message box inside your success function, or call a function from within your success function.

Answer 5

I think it's due to the asynchronous nature of javascript server calls: javascript doesn't wait for the response before proceding to the alert() call

Answer 6

Perhaps the ajax call has yet to return when you do the alert?

Try putting an alert in the success function to test if it is returning at all.

Answer 7

Apologies - I'm cross posting an answer to the question, only saw the other question this guy posted originally.

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 8

The $.ajax() function is asynchronous by default (it's the A in AJAX) so the alert happens before the AJAX callback function is complete. If you need your function to return the value, use the async option.

$.ajax({
    async: false, // disable asynchronous ajax
    url: url,
    dataType: "text",
    success: function(txt) {
        result = txt;
        return;
    }
});

That will freeze the browser until the function is complete, so if you can, it is better to let it run asynchronously and use the result in the success callback function as mentioned by others.