Jquery: Return the value of a ajax call to caller

Question

Im trying to return the value that a $ajax call returns, from a function but it only returns "undefined". If a alert the "reponse" from the ajax call it returns the rigth value. Here is the code, what am i doing wrong?:

$(".insertCandidate").live("click", (function(e) {
            var ids = this.id.toString().split("|");
            var tempCanID = ids[1];
            var canID = ids[0];
            var tempName = CandidateName(tempCanID);
            var canName = CandidateName(canID);
            //alert("HTML: "+tempName);
            $("#mergeCandidateDialog").empty();
            $.blockUI({ message: $("#mergeCandidateDialog").append(
                "<div>" + tempName + "s ansøgning til vil blive lagt under den eksiterende ansøger s data.<br /><br /> Ønsker du at fortsætte?<br /><br /></div>" +
                "<div id=\"content\">" +
                "<input type=\"button\" id=\"" + ids + "\" class=\"insertCandidateYes\" value=\"Ja\" />" +
                "<input type=\"button\" id=\"insertCandidateNo\" value=\"Nej\" /></div>"), css: { cursor: 'default', fontWeight: 'normal', padding: '7px', textAlign: 'left' }
            });
        }));

function CandidateName(candidateID) {
        var returnstring;
        $.ajax({
            type: "POST",
            url: "/Admin/GetCandidateName/",
            data: { 'candidateID': candidateID },
            succes: function(response) {
                returnstring = response;
                return;
            },
            error: function(response) {
                alert("FEJL: " + response);
            }
        });

        return returnstring;
    }

Answer 1

You cannot do this unless you wait for the ajax call to complete by using asynch:false. However I would not do this as it locks up the browser and if the call fails to return the user will have to crash out. It is better to refactor your script and within the success function of the .ajax call to invoke a callback function.

See my answer to a similar question here

Answer 2

 $.ajax({
        type: "POST",
        url: "/Admin/GetCandidateName/",
        data: { 'candidateID': candidateID },
        success: function(response) {
            return response;//USE THIS

            //THIS WILL RETURN FROM THE FUNCTION WITHOUT RETURNING ANY VALUE
            //return;
        },

Answer 3

Add an async true attribute to your .ajax call:

    type: "POST",
    async: false, // ADD THIS
    url: "/Admin/GetCandidateName/",

Also, you left off an "s" on success.

That may do it.

Answer 4

You're doing 2 ajax requests which are identical. To improve performance you should pass an array of IDs to your CandidateName method and then your server-side script also should return an array of matched names.