Заполните поля выбора с помощью ajax. Лучший способ сделать это

Question

У меня есть HTML-страница с четырьмя прямоугольниками. Когда моя страница загружается, я хочу заполнить их данными (используя AJAX). До сих пор все в порядке.

Проблема в том, что я хочу показать в каждом из них выбранное значение. Скажем, у меня есть TABLE_A с column ID_Name, а у TABLE_B есть все имена. Я могу заполнить выбранный выбор всеми именами, но я не могу автоматически показать выбранный ID_Name.

То же самое для других выбранных. Я попытался присвоить переменную ID_Name, но она не работает, потому что я не знаю, что первый скрипт AJAX загружается. Иногда он заполняет выбранные элементы первым и получает идентификатор после, но иногда он делает обратное. Как я могу избежать этого?

Мой сценарий до сих пор ::

<script> 
    jQuery(document).ready(function() { 

     var id_contacto = 0; 
     var recebido_por = 0; 
     var responder_por = 0; 

     // Get general Data 
     $.ajax({ 
      url: 'php/c_consultas.php?tipo_acao=consulta_detalhes_consulta&id_consulta='+getUrlVars()['id_consulta'], 
      type: 'post', 
      data: { tag: 'getData'}, 
      dataType: 'json', 
       success: function (data) { 
        if (data.success) { 
         $.each(data, function (index, record) {        
          if ($.isNumeric(index)) { 
           $('#cliente').val(record.cliente_nome).show(); 
           id_contacto = record.id_contacto; 
           $('#ref_consulta').val(record.referenciaconsulta).show(); 
           $('#titulo').val(record.tituloconsulta).show(); 
           recebido_por = record.recebido_por; 
           responder_por = record.responder_por; 
           $('#consulta_notas').val(record.notas_consulta).show(); 
          } 
        }) 
       } 
      } 
     });    


     // Get List of type of comunication (received by) 
     $.ajax({ 
       url: 'php/listagens.php?tipo_lista=recebido_por', 
       type: 'post', 
       data: { tag: 'getData'}, 
       dataType: 'json', 
        success: function (data) { 
        $('#recebido_por').empty(); 
        $('#recebido_por').append($("<option />").val('').text("Selecione uma opção...").attr('disabled','disabled').attr('style','display:none;')); 
         if (data.success) { 
          $.each(data, function (index, record) {        
           if ($.isNumeric(index))          

            if (record.ID == recebido_por){ 
             $('#recebido_por').append($("<option selected='selected'/>").val(record.ID).text(record.meio_comunicacao)); 
            } else { 
             $('#recebido_por').append($("<option />").val(record.ID).text(record.meio_comunicacao)); 
            } 
          }); 
          $('#recebido_por').trigger("liszt:updated"); 
         } 
        } 
      });    

     // Get type of comunication, again... (respond by) 
     $.ajax({ 
       url: 'php/listagens.php?tipo_lista=recebido_por', 
       type: 'post', 
       data: { tag: 'getData'}, 
       dataType: 'json', 
        success: function (data) { 
        $('#responder_por').empty(); 
        $('#responder_por').append($("<option />").val('').text("Selecione uma opção...").attr('disabled','disabled').attr('style','display:none;')); 
         if (data.success) { 
          $.each(data, function (index, record) {        
           if ($.isNumeric(index))          

            if (record.ID == responder_por){ 
             $('#responder_por').append($("<option selected='selected'/>").val(record.ID).text(record.meio_comunicacao)); 
            } else { 
             $('#responder_por').append($("<option />").val(record.ID).text(record.meio_comunicacao)); 
            } 
          }); 
          $('#responder_por').trigger("liszt:updated"); 
         } 
        } 
      });    




     //List of Internal contacts 
     $.ajax({ 
       url: 'php/c_consultas.php?tipo_acao=listagem_contactos_internos&id_consulta='+getUrlVars()['id_consulta'], 
       type: 'post', 
       data: { tag: 'getData'}, 
       dataType: 'json', 
       success: function (data) { 
        $('#contacto').empty(); 
        $('#contacto').append($("<option />").val('').text("Selecione um contacto...").attr('disabled','disabled').attr('style','display:none;')); 

        if (data.success) { 
         var linha = ""; 
         $.each(data, function (index, record) { 
          if ($.isNumeric(index)) { 
           if (this.ID == id_contacto){ 
            $('#contacto').append($("<option selected='selected'/>").val(this.ID).text(this.nome)); 
           } else { 
            $('#contacto').append($("<option />").val(this.ID).text(this.nome)); 
           } 
          } 
         }) 

         $('#contacto').trigger("liszt:updated"); 
        } 
       } 
      });    
}); // FIM Document(ready). 
</script> 

Answer 1

Я сделал то же самое, используя функцию обратного вызова, не было времени, чтобы полностью объяснить, но Heres код, так что вы должны быть в состоянии понять это.

function CascadeDropDowns(parentClass, childClass, action, callback) { 
    var DropDownId = $(parentClass + " option:selected").val(); 

    $.ajax({ 
    url: "/Terminals_configuration/" + action, 
    data: { DropDownId: DropDownId }, 
    dataType: "json", 
    type: "POST", 
    error: function() { 
     alert("An error occurred."); 
    }, 
    success: function (data) { 
     var items = ""; 
     $.each(data, function (i, item) { 
     items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>"; 
     }); 
     $(childClass).html(items); 
     $(childClass)[0].selectedIndex = 0; 
     if (callback) callback(); 
    } 
    }); 
} 

$(document).ready(function() { 
    // Populates all child drop downs on load 
    var callback = function() { 
    CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); 
    }; 

    CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups", callback); 

    // Populates all child drop downs parent change 
    $(".DeviceTypeDDL").change(function() { 
    var callback = function() { 
     CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); 
    }; 
    CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups", callback); 
    }); 
    $(".ConfigGroupDDL").change(function() { 
    CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); 
    }); 

    $(".MergeDeleteDDL").change(function() { 
    if ($(this).val() == 0) { 
     $("#ConfigValue").val("DELETE"); 
    } 
    else { 
     $("#ConfigValue").val(""); 
    } 
    }); 

Answer 2

Чистейшая способ сделать это (на мой взгляд), чтобы передать все обратно к клиенту в один вызов AJAX. Определите объект JSON как несколько строк (в данном случае 4) из следующих: id, строка с разделителями строк с выделенным списком (listString), currentValue. В ветке «Успех» проанализируйте объект json, разделите строку с разделителями по каналам, загрузите параметры на основе идентификатора controlID и установите значение после присоединения списка опций к списку выбора.

if ('setSels' in serverResponse) { 
     var setSel = serverResponse.setSels; 
     wklen = setSel.length; 
     var optVal = ''; 
     var valList; 
     var j; 
     for (i = 0; i < wklen; i++) { 
      wkEl = jQuery('#' + setSel[i].id); 
      if (wkEl.length) { 
       valList = setSel[i].listString.split("|"); 
       optVal = '<option value=""></option>'; 
       for (j = 0; j < valList.length; j++) { 
        optVal += '<option value="' + valList[j] + '">' + valList[j] + '</option>'; 
       } 
       jQuery(wkEl).html(optVal).val(setSel[i].currentValue); 
      } 
      else { 
       alert('cannot find ' + setSel[i].id); 
      } 
     } 
    }