Как заполнить выпадающий список перед открытием диалогового окна jQuery

Question

У меня есть форма, которая содержит список ссылок, которые открывают базовые документы, т.е. pdf, docs и т. д. С правой стороны эти ссылки у меня есть ссылка href, чтобы открыть диалог jQuery с подробной информацией по каждой конкретной ссылке, например, имя ссылки, возможность загрузки нового обновленного документа и т. д. Теперь также в этом диалоговом окне Я хотел бы иметь список выпадающего списка, который содержит порядок сортировки, который будет представлять собой список номеров 1,2,3,4,5 и т. Д., Чтобы пользователь мог изменить порядок своих ссылок. Каков наилучший способ заполнить текстовые поля формы, выпадающие списки (наиболее важные) с необходимыми данными из базы данных, а затем открыть диалоговое окно jquery. В настоящее время я использую jquery ajax и webservice для правильного заполнения текстовых полей, но выпадающий список заполняется после отображения браузера. Я выполняю вызов ajax с событием щелчка кнопки jquery, когда пользователь нажимает на тег href, который живет в правой части каждой ссылки. Это не позволяет мне захватить выбранное значение при обратной передаче в событии нажатия кнопки сохранения, чтобы получить обновленные значения и обновить запись. Любая помощь будет принята с благодарностью.

function LoadDocumentSort(id, selectedSort) { 
$.ajax({ 
    type: 'POST', 
    url: baseUrl + 'webservices.asmx/GetSortCount', 
    data: JSON.stringify({ articleID: articleid }), 
    contentType: "application/json; charset=utf-8", 
    dataType: 'json', 

    success: function (data) { 

     if (data.d != '') { 

      $("#UIEditSort").empty(); 
      var sortCount = data.d; 

      var listItems; 
      listItems = "<option value=''></option>"; 
      for (var i = 1; i < sortCount + 1; i++) { 


       if (selectedSort == i) { 
        listItems += "<option selected='true' value='" + i + "'>" + i + "</option>"; 
        //$("#UIEditSort").append($("<option selected='true'><option />").val(i).text(i)); 
       } 
       else { 
        //$("#UIEditSort").append($("<option><option />").val(i).text(i)); 
        listItems += "<option value='" + i + "'>" + i + "</option>"; 
       } 
      }; 

      $("#UIEditSort").html(listItems); 
     } 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     alert('error'); 
    } 
}); 

Answer 1

следующее решение сделать выглядеть как этот псевдо-код

 $('#link').on("click",function(event){ 
     $("#loadingDiv").html('Loading ....').show(); 
     $("#containerOfControls").hide(); 
     $("#dialogId").dialog('open'); 
    //Now make the first ajax call 
    $.ajax({ 
    URL: '', 
    success : function(result){ 
       //Populate the textbox and make another ajax call 
        $.ajax({ 
        URL : '', 
        success : function(result){ 
           //Populate the dropdown 
            $("#loadingDiv").hide(); 
            $("#containerOfControls").show(); 

           } 
         }}}});