✔ jquery reihenfolge wird nicht eingehalten

[Kalito]

Hallo,

ich habe eine Funktion, die ein Modal öffnen und einige Felder vorbefüllen soll. Jedoch tritt bei mir das Phänomen auf, dass sich erst das Modal öffnet und einige Felder noch befüllt werden bzw. die Reihenfolge bei der Befüllung von Aufruf zu Aufruf funktioniert. Wie bringe ich jquery dazu die Reihenfolge strikt einzuhalten?

Funktion zum Modal-Aufruf:

$('#testrunparts').on('click','.testrunpart_edit',function(e)
    {
        jQuery.ajax({
            method: "Get",
            url: global_baseurl+'/testrun-parts/edit/'+$(this).data("part"),
            success: function(data)
            {
                //Felder befüllen
                var obj = JSON.parse(data);
                
                //Select-Box der Parent-Einträge
                build_parent_options(obj.parents);
                
                //Kommentarfeld
                var comment = "";
                if(obj.entity.comment && obj.entity.comment.length > 0)
                {
                    comment = obj.entity.comment;
                }
                tinyMCE.editors[$('#part-comment').attr('id')].setContent(comment);
                
                //Restliche Felder
                $('#part-name').val(obj.entity.name);
                $('#part-group-id').val(obj.entity.group_id).trigger('change');
                $('#part-parent-id').val(obj.entity.parent_id).trigger('change');
                $('#part-status-id').val(obj.entity.status_id).trigger('change');
                $('#part-scope-id').val(obj.entity.scope_id);
                $('#part-id').val(obj.entity.id);
              
                //Wenn Service
                if(obj.entity.service_provider_id != null)
                {
                    $('#part-service-provider-id').val(obj.entity.service_provider_id).trigger('change');
                    show_element($('#service_provider_container'));
                    
                    var service_provider_id = $('#part-service-provider-id').val();
                    get_productlist_by_service_provider(service_provider_id,$('#part-product-id'),obj.entity.product_id);
                    get_environmentlist_by_service_provider(service_provider_id,$('#part-environment-id'),obj.entity.environment_id);
                    get_releaselist_by_service_provider(service_provider_id,$('#part-release-id'),obj.entity.release_id);
                }

                $("#testrunpart_modal").modal();
            },
            error: function(data)
            {
                $.alert({
                    title: 'Fehler',
                    content: 'Änderung konnte nicht gespeichert werden.',
                });
                console.log(data);
            }
        });
    });

get_productlist_by_service_provider(), get_environmentlist_by_service_provider und get_releaselist_by_service_provider sind im Grundaufbau gleich (unterscheiden sich nur anhand der URL) und sehen wie folgt aus:

function get_releaselist_by_service_provider(service_provider_id,select,selected = null)
{
    show_loader();

    $('option', select).remove();

    jQuery.ajax({
        method: "GET",
        url: global_baseurl+'api/release-by-provider/'+service_provider_id,
        success: function(data)
        {
            //erstes Element ist immer leer
            var obj = JSON.parse(data);
            select.append(new Option("", ""));

            //Aufbau der Objektlist
            $.each(obj, function(val, text) {
                select.append(new Option(text, val));
            });

            //Setzen des anzuzeigenden Wertes
            if(selected != null)
            {
                select.val(selected).trigger('change');
            }
        },
        error: function(data)
        {
            $.alert({
                title: 'Fehler',
                content: 'Releaseliste konnte nicht aktualisiert werden.',
            });
            console.log(data);
        }
    });

    hide_loader();
}

 

[Sempervivum]

Wenn das Phänomen die Felder betrifft, die hiermit gefüllt werden:

                    get_productlist_by_service_provider(service_provider_id,$('#part-product-id'),obj.entity.product_id);
                    get_environmentlist_by_service_provider(service_provider_id,$('#part-environment-id'),obj.entity.environment_id);
                    get_releaselist_by_service_provider(service_provider_id,$('#part-release-id'),obj.entity.release_id);

ist die Antwort wahrscheinlich einfach: Die Informationen werden asynchron durch Ajax geholt und dadurch kann es vorkommen, dass die Antworten vom Server erst eintreffen, wenn das Modal schon sichtbar ist und dass sich die Reihenfolge verschiebt.

 

[Kalito]

genau so ist es. Was kann ich machen, dass die Reihenfolge eingehalten wird. Den Funktionen einen return-Wert verpassen?

 

[Sempervivum]

Einfacher als eine Reihenfolge zu erzwingen, wäre, das Modal erst aufzumachen, wenn alle Antworten da sind: Für jede Antwort ein boolean definieren, etwa so:

var productlistReady = false,
    environmentlistReady = false,
    releaselistReady = false;

Und dann in einer Vorverarbeitung für das Modal prüfen, ob alle das sind:

function vorModal() {
    if (productlistReady &&  environmentlistReady && releaselistReady) {
        $("#testrunpart_modal").modal();
    }
)

und vor dem Aufruf das boolean setzen, z. B.:

productlistReady = true;
vorModal();

Das Problem hat man sehr häufig, dass man warten muss bis alle asynchronen Vorgänge fertig sind, weil sie Voraussetzung für die weitere Verarbeitung sind. Letzteres trifft allerdings in deinem Fall nicht zu.

 

[Kalito]

Naja, schon klar, Wenn ich aber die Prüfung einbaue, dann geht es auch nur bedingt (wegen der Asynchronität). habe jetzt mit "async: false," das ganze ausgestellt und es funktioniert.