jquery nested ajax problem

I have one jquery ajax call nested inside another. The second call works, but the populated var I'm trying to return on the second call's success winds up undefined in the calling function. Here's the code:

$("input#ButtonSubmitMedNameLookup").click(function(evt) {
    evt.preventDefault();
    var dto = { medName: $("#TextBoxMedNameLookup").val() };
    $.ajax({
        type: "post",
        contentType: "application/json; charset-utf-8",
        dataType: "json",
        url: "/Users/MedicationAddNew.aspx/LookupMed",
        data: JSON.stringify(dto),
        success: function(response) {
            var meds = response.d;
            writeMedsToTable(meds);
        }
    });

...and further down in my codefile...

function writeMedsToTable(meds) {
    var htmlString;
    if (meds.length > 0) {
        htmlString = "<h3>Which of these is it?</h3>";
        htmlString += "<table cellpadding=\"0\" cellspacing=\"0\" class=\"jtable\"><tbody>";
        for (i = 0; i < meds.length; i++) {
            htmlString += "<tr><td>"
            + "<input type=\"image\" class=\"newMedSelector\" src=\"Thumb.aspx?img=" + meds[i].RxCui.toString() + "&w=75&h=75\" rxcui=\""
            + meds[i].RxCui.toString() + "\">"
            + meds[i].BrandName + " " + meds[i].Strength + " " + meds[i].Route + "</td></tr>";
        }
        htmlString += "</tbody></table>";
    } else {
        htmlString = getSuggestionsString();
    }
    $("div#SearchResults").html(htmlString);
    $("div#SearchResults").css({
        padding: "10px",
        color: "#FF0000"
    });
    $("div#SearchResults").show(500);
}
function getSuggestionsString() {
    var dto = { medName: $("#TextBoxMedNameLookup").val() };
    $.ajax({
        type: "post",
        contentType: "application/json; charset-utf-8",
        dataType: "json",
        url: "/Users/MedicationAddNew.aspx/GetSuggestions",
        data: JSON.stringify(dto),
        success: function(response) {
            var suggestions = response.d;
            var htmlString = "<h3>No results returned.  Did you mean one of these?</h3>";
            htmlString += "<table cellpadding=\"0\" cellspacing=\"0\" class=\"jtable\"><tbody>";
            for (i = 0; i < suggestions.length; i++) {
                htmlString += "<tr><td>"
                + "<a href=\"#\"&开发者_StackOverflow社区gt;"
                + suggestions[i]
                + "</a>"
                + "</td></tr>";
            }
            htmlString += "</tbody></table>";
            return htmlString; // contains expected string
        }
    });
}

When I step through this in Firebug, htmlString within getSuggestionsString contains what I need right before being returned, but htmlString in writeMedsToTable is undefined after the call.

I don't get it. Please, help.

EDIT: Well, I still don't know what the problem is with the above code. But for my purposes, as a workaround, it works if I just to select the target div again like this:

function getSuggestionsString() {
    var dto = { medName: $("#TextBoxMedNameLookup").val() };
    $.ajax({
        type: "post",            
        contentType: "application/json; charset-utf-8",
        dataType: "json",
        url: "/Users/MedicationAddNew.aspx/GetSuggestions",
        data: JSON.stringify(dto),
        success: function(response) {
            var suggestions = response.d;
            var htmlString = "<h3>No results returned.  Did you mean one of these?</h3>";
            htmlString += "<table cellpadding=\"0\" cellspacing=\"0\" class=\"jtable\"><tbody>";
            for (i = 0; i < suggestions.length; i++) {
                htmlString += "<tr><td>"
                + "<a href=\"#\">"
                + suggestions[i]
                + "</a>"
                + "</td></tr>";
            }
            htmlString += "</tbody></table>";
            $("div#SearchResults").html(htmlString);
        }
    });
}

Not my ideal, but it works.

I think its a problem because of the ajax call being asynchronous. Change the getSuggestionsString to include async:false config parameter for ajax as given below and try:

function getSuggestionsString() { 
    var dto = { medName: $("#TextBoxMedNameLookup").val() }; 
    $.ajax({ 
        type: "post", 
                async: false,
        contentType: "application/json; charset-utf-8", 
        dataType: "json", 
        url: "/Users/MedicationAddNew.aspx/GetSuggestions", 
        data: JSON.stringify(dto), 
        success: function(response) { 
            var suggestions = response.d; 
            var htmlString = "<h3>No results returned.  Did you mean one of these?</h3>"; 
            htmlString += "<table cellpadding=\"0\" cellspacing=\"0\" class=\"jtable\"><tbody>"; 
            for (i = 0; i < suggestions.length; i++) { 
                htmlString += "<tr><td>" 
                + "<a href=\"#\">" 
                + suggestions[i] 
                + "</a>" 
                + "</td></tr>"; 
            } 
            htmlString += "</tbody></table>"; 
            return htmlString; // contains expected string 
        } 
    }); 
}