Erstellen dynamisch mit jQuery. Unerwartete Ergebnisse in IE 11

Question

Ich schreibe ein Dashboard der Art. Mehrere API-Aufrufe werden erstellt und basierend auf den Ergebnissen, erstelle ich dynamisch die Elemente auf dem Bildschirm.

Dies funktioniert 100% wie erwartet in Chrome 56, Firefox ESR 45.7.x und Microsoft Edge. Der Übeltäter ist IE 11 (den ich leider immernoch unterstützen muss).

Wenn die Zellen dynamisch erstellt werden (achten Sie auf die Zeile mit dem Anfangsbuchstaben ‚var col1LED‘), aus irgendeinem Grund, es funktioniert nur auf dem zweiten (und diejenigen, die folgen) Iteration (n) des $ .each. In der ersten Iteration sind die Werte für Schlüssel vorhanden (ich habe mit console.log überprüft), aber die resultierenden td Objekte sind leer.

Ich bin auf dem Verlust, wo ich als nächstes aussehen soll. Ich habe diese bei Leborem mit Google durchsucht und gesucht, ohne irgendwelche signifikanten Ergebnisse.

Folgendes wird direkt aus dem Dashboard-Code kopiert (mit offensichtlichen sensiblen Namen/Anrufen geändert).

/* ... this happens inside the '.done' of another ajax call */ 
dataTable = $("#tblData"); 
$.each(response.data, function(row, key) 
{ 
    $.ajax({ 
     method: "GET", 
     url: url.origin + "/API/v1/objects/" + key.ID, 
     data: { type: "wlc", identifier_type: "wlcap", status: "0" }, 
     }).done(function(apResponse){ 
      /* Determine the status for each AP found 
       Status values for each 
       1 - Active and associated 
       2 - Disassociated 
       3 - Downloading 
       all that don't match go to 'u' for 'unknown;' 
      */ 
      var status_1 = 0; 
      var status_2 = 0; 
      var status_3 = 0; 
      var status_u = 0; //Unknown 
      $.each(apResponse.data, function(apRow, apKey){ 
       switch (apKey.status){ 
        case "1": 
         status_1 += 1; 
         break; 
        case "2": 
         status_2 += 1; 
         break; 
        case "3": 
         status_3 += 1; 
         break; 
        default: 
         status_u += 1; 
         break; 
       } 
      }) 

      /* Once all the AP statusses have been tallied, write the info for the specific node */ 
      var ledFile = "LEDgreen.svg"; 
      var cssClass = "table-cell-black"; 
      if (status_2 != 0) 
      { 
       ledFile = "LEDred.svg"; 
       cssClass = "table-cell-critical"; 
      } else if (status_3 != 0) { 
       ledFile = "LEDorange.svg"; 
       cssClass = "table-cell-warning"; 
      } else { 
        ledFile = "LEDgreen.svg"; 
       cssClass = "table-cell-black"; 
       } 

      clearPanel("#tblController"); //First clear any existing data using seperate function 

      /* Create headers for table */ 
      var colHead1LED = $('<th></th>').addClass('table-header table-cell-center').html(''); 
      var colHead2wlcDetail = $('<th></th>').addClass('table-header table-cell-left').html(''); 
      var colHead3APOK = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Active and Asssociated">A/A</div>'); 
      var colHead4APDown = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Disassociated">D/A</div>'); 
      var colHead5APTotal = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Downloading">D/L</div>'); 
      var colHead6APExtra = $('<th></th>').addClass('table-cell table-cell-center').html('<div title="Total">Total</div>'); 

      /* Add new row */ 
      var headerRow = $('<tr></tr>'); 
      /* Append each of the cells/headers to the header row */ 
      headerRow.append(colHead1LED); 
      headerRow.append(colHead2wlcDetail); 
      headerRow.append(colHead3APOK); 
      headerRow.append(colHead4APDown); 
      headerRow.append(colHead5APTotal); 
      headerRow.append(colHead6APExtra) 
      /* Add row to table */ 
      dataTable.append(headerRow); 

      /* Create cells */   
      var col1LED = $('<td></td>').addClass('table-cell table-cell-center').html('<img class="LED" style="width:1.0em;height:1.0em;" title="Status" src="resources/images/'+ ledFile +'">'); 
      var col2wlcDetail = $('<td></td>').addClass('table-cell ' + cssClass).html('<a href="#" onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 0);" title="' + key.description + ' (' + key.ip + ')">' + key.description + ' (' + key.ip + ')</a>'); 
      var col3APOK = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 1);" class="button-success">' +status_1 + '</button>'); 
      var col4APDown = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 2);" class="button-danger">' +status_2 + '</button>'); 
      var col5APTotal = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 3);" class="button-warning">' +status_3 + '</button>'); 
      var col6APExtra = $('<td></td>').addClass('table-cell table-cell-center').html('<button onClick="getWlcApList(\'' + key.ID + '\',\''+ key.description + '\',\''+ key.ip + '\', 0);" class="button-info">' + (status_1 + status_2 + status_3) + '</button>'); 


      /* Create data row */ 
      var dataRow = $('<tr></tr>').addClass('table-row-data'); 

      /* Add cells to row*/ 
      dataRow.append(col1LED); 
      dataRow.append(col2wlcDetail); 
      dataRow.append(col3APOK); 
      dataRow.append(col4APDown); 
      dataRow.append(col5APTotal); 
      dataRow.append(col6APExtra); 

      /* add row to array*/ 
      tableWlcData.push(dataRow); 


      }).promise().done(function(){ 
       /* Once everything is done, append the array of ROWS to the table */ 

       dataTable.append(tableWlcData); 


      }); 
}); 

Answer 1

Die folgende Zeile war der Täter:

clearPanel("#tblController"); //First clear any existing data using seperate function 

Dies ist eine Funktion, die einfach macht folgendes:

function clearPanel(elementId) 
{ 
    $(elementId).html(''); 
} 

nicht sicher, warum dies ein Problem verursacht, aber ich änderte die Schleife nur Tun Sie die clearPanel wenn ich in der Zeile '0' bin.

Jetzt funktioniert

Answer 2

Ein möglicher Grund könnte sein, dass Sie auf jeder Schleife die AJAX-Anforderung ausführen, die synchron ist, und den Wert des „Schlüssels“ in dem Erfolg Rückruf jeder Anforderung mit, die asynchron ist und damit die Der Umfang von key ist verloren.

Wenn das das Problem nicht behebt, poste bitte eine Geige mit dem HTML und dem Rest des Kontexts (mit Dummy-Daten, falls nötig) und ich werde mich freuen, sie im Detail zu überprüfen. Dennoch sollten Sie die Self-Calling-Funktion nur für den richtigen und stabilen Javascript-Code beibehalten.

---

AKTUALISIERT ANTWORT:

Versuchen Sie, diese innerhalb der letzten Versprechen Zugabe():

var html = tableWlcData.join("\n"); 
console.log(html); 
dataTable.html(html); 

Wenn nicht direkt in die Tabelle den HTML-Code der Tabelle einstellen, als es als ein Anhängen Array über das jQuery-Objekt repariert es nicht in IE, dann überprüfen Sie bitte das HTML, das auf der Konsole gedruckt wird, und prüfen Sie auf jedes fehlerhafte HTML, das IE11 verursacht, sich zu ersticken.

Vergewissern Sie sich außerdem, dass Sie die neueste Version von jQuery (aktuelle Version 3.1.1) verwenden, nur für den Fall, dass in der von Ihnen verwendeten Version ein IE-spezifischer Fehler auftritt.