Question

我有一个jquery ajax调用嵌套在另一个中。第二个调用有效，但是我试图在第二个调用的成功时返回的填充变量在调用函数中未定义。这是代码：

$("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);
        }
    });

...并在我的代码文件中进一步...

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

当我在Firebug中逐步执行此操作时，getSuggestionsString中的htmlString在返回之前包含了我需要的内容，但是在调用之后未定义writeMedsToTable中的htmlString。

我不明白。请帮忙。

修改好吧，我仍然不知道上面的代码是什么问题。但就我的目的而言，作为一种解决方法，如果我只是再次选择目标div，它就可以工作：

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

不是我的理想，但它确实有效。

Answer 1

我认为这是一个问题，因为ajax调用是异步的。更改getSuggestionsString以包含async：ajax的false config参数，如下所示，并尝试：

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

jquery嵌套了ajax问题

1 个答案: