jqueryネストされたajaxの問題

Question

私は1つのjquery ajax呼び出しを別のものの中にネストしています。 2番目の呼び出しは機能しますが、2番目の呼び出しの成功を返そうとしているpopulated varは、呼び出し関数で定義されていません。ここでは、コードです：私はhtmlString getSuggestionsString内で右返される前に、私は必要なものが含まれ、Firebugのでは、このステップスルーすると

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