jquery 중첩 된 아약스 문제

Question

하나의 jquery 아약스 호출이 다른 내부에 중첩되어 있습니다. 두 번째 호출은 작동하지만 두 번째 호출의 성공을 반환하려고하는 채워진 var은 호출 함수에서 정의되지 않은 상태가됩니다. 여기에 코드입니다 : 내가 htmlString getSuggestionsString 내에서 잘 반환하기 전에 필요한 것을 포함, 방화범이 단계별 때

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

...

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

... 그리고 더 아래로 내 codefile에서, 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 호출 때문에 문제가 있다고 생각합니다.

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