jquery nested ajax problem

Question

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=\"#\">"
                + 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.

Chandu · Accepted Answer · 2010-12-07 23:23:40Z

1

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 
        } 
    }); 
}

answered Dec 7, 2010 at 23:23

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marvin Over a year ago

Thanks for looking at it and taking a stab. I tried the async: false but it still didn't work. Wish I knew how to make it work, but for now, I just decided to not return the htmlstring and instead select the div again from inside getSuggestionsString to inject the html.

Collectives™ on Stack Overflow

jquery nested ajax problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related