MVC - Wählen Sie die richtige Dropdown-Option nach jquery Auffüllen

Question

Ich erstelle eine Bearbeitungsansicht, die ihre Inhalte und Formularelemente basierend auf den Bearbeitungsvorgängen ändern wird. Ich übergebe ein Modell, speichere einen Wert in einem versteckten Element, und sobald das Dokument fertig ist, benutze ich Ajax, um ein Dropdown zu füllen. Unmittelbar danach muss ich die richtige Option auswählen, die gleich dem Wert im versteckten Element ist. Mein Code wird nicht funktionieren und ich habe versucht, herauszufinden, warum für 2 Tage.

RASIERMESSER

@Html.DropDownList("ddl_publisher", new List<SelectListItem>(), new { @class = "form-control form-group", @style = "display:none", @onchange = "storeNewPublisher()" }); 
@Html.Hidden("hid_publisher", Model.Value, new { @class = "form-control" }) 

JQUERY

$(document).ready(function(){ 
    loadPublishers(); 
    changeDDLSelection(); 
} 

function changeDDLSelection() { 
    publ = $("#hid_publisher").val(); 
    $("#ddl_publisher").val(publ).change(); 
} 
function storeNewPublisher() { 
    var publisherText = $("#ddl_publisher option:selected").text(); 
    var publisherValue = $("#ddl_publisher option:selected").val(); 
    var publisherStatus = publisherText.replace(publisherValue, '').replace('-', '').replace('[', '').replace(']', '').trim(); 
    $("#hid_publisher").val(publisherValue); 
    $("#hid_publisherStatus").val(publisherStatus); 
} 

AJAX

function loadPublishers() { 
    $.ajax({ 
     type: "GET", 
     url: "/Filter/GetPublishers/", 
     contentType: 'application/json', 
     data: { productType : $("#ddl_filterProdType option:selected").val() }, 
     success: function (data) { 
      $.each(data, function (i, pub) { 
       $("#ddl_publisher").append('<option value="' + pub.Text + '"> [ ' + pub.Value + ' ] - ' + pub.Text + '</option>'); 
      }); 
     }, 
     error: displayPublishFailureMessage 
    }); 
} 

Die Anruf tritt die Nachfolge und innen changeDDLSelection die Variable publ hat den richtigen Wert, aber das Dropdown wird nicht seine Option ändern (es tut es stattdessen, wenn ich den Code in der Chrome-Konsole ausführen). Noch ändern feuert, also storeNewPublisher wird ausgelöst, aber jede lokale Variable ist undefined.

Ich kann meinen Kopf nicht mehr an die Wand knallen, meine Nachbarn beschweren sich.

Vielen Dank im Voraus

Answer 1

In Ihrer aktuellen Implementierung rufen Sie changeDDLSelection Verfahren nach loadPublishers. Aber das bedeutet nicht, dass Ihre zweite Methode immer ausgeführt wird, nachdem die Methode changeDDLSelection alle Aufgaben erledigt hat. Wenn Sie eine console.log in jede Methode einfügen, sehen Sie dies.

was um Sie tun sollten, für loadPublishers Verfahren die changeDDLSelection Methode innerhalb des success Ereignis des Ajax-Aufruf aufrufen (nachdem alle Optionen aus dem Ergebnis Array anhängt)

function loadPublishers() { 
    $.ajax({ 
     type: "GET", 
     url: "/Filter/GetPublishers/", 
     contentType: 'application/json', 
     data: { productType : $("#ddl_filterProdType option:selected").val() }, 
     success: function (data) { 
      $.each(data, function (i, pub) { 
       $("#ddl_publisher").append('<option value="' + pub.Text + 
            '"> [ ' + pub.Value + ' ] - ' + pub.Text + '</option>'); 
      }); 
      //Safely call the second method here 
      changeDDLSelection(); 
     }, 
     error: displayPublishFailureMessage 
    }); 
} 
function changeDDLSelection() { 
    var publ = $("#hid_publisher").val(); 
    $("#ddl_publisher").val(publ).change(); 
} 

$(document).ready(function(){ 
    loadPublishers();  
}