Wie man ein modales Kästchen AUSWÄHLT Formularsteuerelement auffüllt, bevor es mit dem Ereignis showed.sb.modal gezeigt wird

Question

Ich habe ein einfaches modales Popup, das ein Element bearbeitet, das vom Backend abgerufen wird. Das for hat mehrere Eingabe- und Auswahlsteuerelemente. Die Eingabeformularsteuerelemente funktionieren ordnungsgemäß, aber die Auswahlsteuerelemente sind nicht wie vorgesehen vorbelegt.

Die grundlegende Architektur meiner Funktionen wie folgt:

function BootboxEditItem(id) { 

    $.ajax({ 
     // Load back end data 
    }) 
    .done(function(data) { 

     var itemData = data; 

     $.ajax({ 

      // Load form template for modal 
      url: '/modal/item/edit-item.html', 
      ...... 
     }) 
     .success: function (data) ({ 

      var box = bootbox.confirm({ 

       // Set up bootbox buttons; 
      }, 
      callback: function(result){ 

       // Post edited data back to the server 
      } 
     )}; 

     box.on("shown.bs.modal", function(e) { 

      // Populate the modal here using data from the backend. 
      // This is where the problem lies! 
     }) 

     box.modal("show"); 
    }); 
} 

Unterhalb der vollständige Code JavaScript ist:

function BootboxEditItem(id) { 

var itemDao = ''; 

$.ajax({ 

    type: "GET", 
    contentType: "application/json", 
    url: "/api/item/edit/" + id, 
    dataType: "json", 
    cache: false 
}) 
.done(function (data) { 

    itemDao = data; 

    $.ajax({ 
     type: "GET", 
     url: '/modal/item/item-edit-form.html', 
     success: function (data) { 

      console.log(itemDao); 

      var box = bootbox.confirm({ 

       message: data, 
       title: "Edit Item: [" + itemDao.item.sysId + "]", 
       buttons: { 
        cancel: { 
         label: "Cancel", 
         className: "btn-danger btn-fixed-width-100" 
        }, 
        confirm: { 
         label: "Save", 
         className: "btn-success btn-fixed-width-100" 
        } 
       }, 
       callback: function (result) { 



       } 
      }); 

      box.on("shown.bs.modal", function(e) { 

       console.log(e.currentTarget); 

       var selectItemLevel = document.getElementById('editItemLevel'); 

       console.log(selectItemLevel); 

       $(selectItemLevel).empty(); 

       $.each(itemDao.itemLevels, function (key, index) { 

        var opt = document.createElement('option'); 

        opt.value = index; 
        opt.innerHTML = 'Level ' + index; 

        selectItemLevel.appendChild(opt); 
       }); 

       $(e.currentTarget).find('select[name="editItemLevel"]').val(selectItemLevel); 
       $(e.currentTarget).find('input[name="editIdentifier"]').val(itemDao.item.identifier); 
       $(e.currentTarget).find('textarea[name="editItemValue"]').val(itemDao.item.itemValue); 

      }); 

      box.modal('show'); 
     } 
    }); 
}); 
} 

Hier ist der Code für die HTML-Datei:

<form id="editItem" action="/api/items/save" method="post"> 

<input type="hidden" name="artifactId" id="artifactId" value="" /> 
<input type="hidden" name="editId" id="editId" value="" /> 
<input type="hidden" name="editSysId" id="editSysId" value="" /> 
<input type="hidden" name="editSortIndex" id="editSortIndex" value="" /> 

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label for="editItemLevel">Item level:</label> 
      <select class="form-control" id="editItemLevel" name="editItemLevel"></select> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label for="editItemClass">Item class:</label> 
      <select class="form-control" id="editItemClass" name="editItemClass" onchange="itemEditClassChange();"></select> 
     </div> 
    </div> 
</div> 

<div class="row" id="editRequirementRow"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label for="editItemType">Requirement type:</label> 
      <select class="form-control" id="editItemType" name="editItemType"></select> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label for="createIdentTemplate">Identifier prefix:</label> 
      <select class="form-control" id="editIdentTemplate" name="editIdentTemplate" onchange="itemEditIdentTemplateChange();"></select> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label for="createMediaType">Media type:</label> 
      <select class="form-control" id="editMediaType" name="editMediaType"></select> 
     </div> 
    </div> 
    <div class="col-sm-6" id="editIdentField"> 
     <div class="form-group"> 
      <label for="editIdentifier">Identifier:</label> 
      <input type="text" class="form-control" id="editIdentifier" name="editIdentifier" /> 
     </div> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="editItemValue">Item details:</label> 
    <textarea class="form-control" rows="5" cols="50" id="editItemValue" name="editItemValue"></textarea> 
</div> 

Und hier ist die Ausgabe, die für eines der SELECT-Steuerelemente bestimmt ist, die von console.log() gedruckt werden;

<select class="form-control" id="editItemLevel" name="editItemLevel"> 
    <option value="1">Level 1</option> 
    <option value="2">Level 2</option> 
    <option value="3">Level 3</option> 
    <option value="4">Level 4</option> 
    <option value="5">Level 5</option> 
    <option value="6">Level 6</option> 
    <option value="7">Level 7</option> 
    <option value="8">Level 8</option> 
    <option value="9">Level 9</option> 
    <option value="10">Level 10</option> 

Answer 1

Es scheint, Ihre jede Schleife nicht richtig Anhängen des <option></option> .Wenn Sie Chrom-Entwickler-Tools haben, und Sie wissen, wie es zu benutzen, um einen Haltepunkt in dieser Funktion setzen und sicherstellen, dass die Auswahlmöglichkeiten sind wobei auf das DOM erstellt und hinzugefügt:

$.each(itemDao.itemLevels, function (key, index) { 
      var opt = document.createElement('option'); 
      opt.value = index; 
      opt.innerHTML = 'Level ' + index; 
      selectItemLevel.appendChild(opt); //breakpoint here 
     }); 

auch werden, da Sie bereits jQuery verwenden, können Sie sie auf das DOM wie folgt hinzu:

$.each(itemDao.itemLevels, function (key, index) { 
     $(selectItemLevel).append('<option value="'+index+'">Level '+index+'</option>'); 

}); 

Answer 2

Dank @ nilerafetr24, aber das Problem bestand nicht darin, richtig anzuhängen. Es ging vielmehr darum, wie man das SELECT-Steuerelement vor dem Anzeigen erhält.

Sicher funktioniert das folgende nicht document.getElementById('editItemLevel'), aber das folgende funktioniert $(e.currentTarget).find('select[name="editItemLevel"])'.

Also ist meine endgültige Lösung, die Schleife so neu zu schreiben; nach der Kombination mit der von @ nilerafetr24 vorgeschlagenen Lösung, die effizienter zu sein scheint: