Webservice aufrufende HTML Seite zeigt manchmal erst nach 2mal aktualisieren Daten an!

[hmm]

Hallo und Herzlich Willkommen zu dem hmm seinen merkwürdigen Problemen!

Wenn ich meine HTML Seite im Browser starte wird folgender Code ausgeführt:

var i = 1;
            
$.ajax({
    url : "/getSkillData",
    dataType: "JSON",
    type: "GET",
    success: function (data) {
        for(var j = 0; j < data.length; j++) {
            addTableRowParam(data[j].mitarbeiter_id, data[j].name, data[j].skill, data[j].subskill, data[j].nivau);
        }
        addTableRowParam("", "", "", "", "");
    }
});
            
$(document).ready(function () {
    $('.addBtn').on('click', function () {
        addTableRow();
    });
            
    $('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });
            
});

function addTableRowParam(mitarbeiter_id, name, skill, subskill, nivau) {
    var nr = i;
    var tempTr = $('<tr><td><input type="number" value="' + mitarbeiter_id + '" id="mid_' + nr + '" class="form-control" disabled/><td><input type="text" value="' + name + '" id="name_' + nr + '" class="form-control"/></td><td><input value="' + skill + '" type="text" id="skill_' + nr + '" class="form-control" /><td><input value="' + subskill + '" type="text" id="subskill_' + nr + '" class="form-control" /></td><td><input value="' + nivau + '"type="number" id="nivau_' + nr + '" min="0" max="5" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td></tr>');
    $("#tableAddRow").append(tempTr);
    $('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });
    i++;
}
            
function addTableRow() {
    var tempTr = $('<tr><td><input type="number" id="mid_' + i + '" class="form-control" disabled/></td><td><input type="text" id="name_' + i + '" class="form-control"/></td><td><input type="text" id="skill_' + i + '" class="form-control" /><td><input type="text" id="subskill_' + i + '" class="form-control" /></td><td><input type="number" id="nivau_' + i + '" min="0" max="5" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td></tr>');
    $("#tableAddRow").append(tempTr);
    $('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });
    i++;
}

Leider muss ich diese HTML Seite teilweise zweimal laden bis auch tatsächlich Daten angezeigt werden. Wie mache ich, dass die Daten immer nach nur einmal laden angezeigt werden?

Der Webservice "/getSkillData" läd mir die Daten immer, also muss ich irgendwas bei dem ajax zeugs vermorkst haben, oder?

[Rolf B]

Hallo hmm,

ich vermute eine Race-Condition, d.h. der Ajax-Callback läuft, bevor das DOM fertig aufgebaut ist.

Am einfachsten ist, wenn Du den Ajax-Request komplett in den Ready-Handler schiebst.

Wenn es deine Absicht ist, Seitenaufbau und Datenbeschaffung zu parallelisieren, dann setze den Ajax-Call in ein Promise, das Du bei Eintreffen der Daten resolvest. Und in den ready-Handler setzt du promise.then(...).

var getData = new Promise(function(resolve, reject) {
   $.ajax( {
      // übrige Parameter
      success: resolve; // promise-Resolver ist 1:1 als success-Funktion nutzbar,
      error: function(req, status, error): reject({ status, error });
   }); 
});

// JQuery Readyhandler setzen
$(function() {
   // hier die Seiteninitialisierung

   // AJAX Ergebnis abholen (erfolgt asynchron, sobald Daten verfügbar sind)
   getData.then(function(data) {
      // Hier der Code aus deinem ehemaligen success-Handler
   })
   .catch(function(ajaxError) {
      // Handling je nach ajaxError.status und ajaxError.error
   });
});

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wenn es deine Absicht ist, Seitenaufbau und Datenbeschaffung zu parallelisieren, dann setze den Ajax-Call in ein Promise

??

Dann verwende nicht AJAX (XMLHttpRequest), sondern fetch(), das liefert schon ein Promise.

LLAP 🖖

[dedlfix]

Tach!

Leider muss ich diese HTML Seite teilweise zweimal laden bis auch tatsächlich Daten angezeigt werden. Wie mache ich, dass die Daten immer nach nur einmal laden angezeigt werden?

Welche Schritte zur Ursachenfindung hast du bereits unternommmen? Zielgerichtetes Vorgehen ist, zuerst die Frage nach der Ursache zu stellen, dazu alle Möglichkeiten des Debuggings durchzuschauen, und dann erst die Frage nach dem weiteren Vorgehen zu stellen.

dedlfix.