DataTables mit XML befüllen - klappt nicht in IE?

pyretta

Mitglied
Hallo liebe tutorials.de-Community,

ich versuche eine DataTable per XML zu befüllen. Das klappt auch im FireFox wunderbar, nur im IE nicht (getestet mit IE 11 unter Win8 und IE8 unter Win7).
Ich verstehe einfach nicht wieso, denn eine im Aufbau ähnliche XML-Funktion habe ich bereits in anderen Projekten verwendet und dort lief es auch im IE perfekt. Bin gerade wirklich etwas ratlos und hoffe, dass mir jemand einen Tipp geben kann.

Ich nutze jQuery 1.10.2 und DataTables 1.10.0.

Hier mein JavaScript-Code:
Code:
$(document).ready(function() {
   var thisTable;
   thisTable = $('table.tabs_datatable').dataTable();
$.get("list.xml", function(XMLmediaArray){ 
       $(XMLmediaArray).find("row").each(function(){
         var $sop_row = $(this);
         var sorter = $sop_row.find("sorter").text();
         var ProcessArea = $sop_row.find("processarea").text();
         var PACode = $sop_row.find("pacode").text();
         var DocumentID = $sop_row.find("documentid").text();
         var Version = $sop_row.find("version").text();
         var DocumentType = $sop_row.find("documenttype").text();
         var DocumentTitle = $sop_row.find("documenttitle").text();
         var ID = $sop_row.find("id").text();
         var Deeplink_text = $sop_row.find("deeplink").text();
         var EffectiveDate = $sop_row.find("effectivedate").text();
      
         var deeplink = "";      
         if(Deeplink_text.indexOf("http://") != -1){
           deeplink = "<a href='"+Deeplink_text+"' target='_blank'>"+Deeplink_text+"</a>";
           }else{
             deeplink = Deeplink_text;
             }
      
         var addData = [];
         addData.push(sorter);
         addData.push(ProcessArea);
         addData.push(PACode);
         addData.push(DocumentID);
         addData.push(Version);
         addData.push(DocumentType);
         addData.push(DocumentTitle);
         addData.push(ID);
         addData.push(deeplink);
         addData.push(EffectiveDate);
  
         thisTable.fnAddData(addData);
                
       });
     });
//---------------------------
});//-END- $(document).ready


Und mein HTML-Code:
HTML:
<table class="tabs_datatable" cellpadding="0" cellspacing="0" width="1100">
     <thead>
     <tr>
  <th>Sorter</th>
  <th>Process Area</th>
  <th>PA Code</th>
  <th>Document ID</th>
  <th>Version</th>
  <th>Document Type</th>
  <th>Document Title</th>
  <th>ID</th>
  <th>Deeplink</th>
  <th>Effective Date</th>
  </tr>
  </thead>
  </table>

Hier die XML-Funktion, die im IE perfekt lief:

Code:
$.get("kontaktdaten.xml", function(XMLmediaArray){
       $(XMLmediaArray).find("contact").each(function(){
         var $contacts = $(this); 
         var name = $contacts.find("name").text();
         var email = $contacts.find("email").text();
         $('#col_content .col_content_inner '
        +'.accordion table tbody td a span:contains("'+name+'")').closest('a').attr('href', 'mailto:'+email);
       });
     });

EDIT:
Ich habe herausgefunden, dass aus welchen Gründen auch immer in diesem Fall ".find" im IE nicht geht. Habe das durch "console.log(...)" Befehle getestet die ich einmal direkt nach "$.get("list.xml", function(XMLmediaArray){" und einmal nach "$(XMLmediaArray).find("row").each(function(){" eingefügt habe. Der erste "console.log(...)" Befehl kam in der Konsole an der zweite nicht. Ergo: ".find" mag IE nicht aber dafür ".filter". Es gibt dann aber keine Daten in der Website aus - nur in der Konsole. Die Tabellenzellen werden zwar angelegt aber ohne Inhalt. UND ganz wichtig: Mit ".filter" geht es im Firefox nicht mehr.
 
Zuletzt bearbeitet:
Hi,

das nenne ich mal eine hervorragende Problembeschreibung. Wenn du noch die XML-Datei zur Verfügung stellen könntest, die du verwendest, wäre das Nachstellen einfacher.

Ciao
Quaese
 
Hallo Quaese,

vielen Dank für deine Antwort.
Leider ist die betreffende XML-Datei etwas zu groß um sie hier zu posten ( fast 1000 Datensätze).
Aber ich hab den Code in gewisser Weise zum laufen gebracht, einfach dadurch dass es auf einem anderen Server lief. Frag mich jetzt nur nicht wieso :confused:.

Aber, jetzt kommt es im IE8 zu folgender Fehlermeldung "Stop running this script". Diese kommt etwa 10 mal in Folge, wenn man dort auf "no" klickt. Bedeutet wohl - die XML hat für den IE8 zu viele Datensätze und er kann sie nur Scheibchenweise verarbeiten.

Mein Code hat sich deshalb ein klein Wenig verändert, weil ich versuche die Daten in für den IE8 verarbeitbare Päckchen zu stückeln. Aber komme da leider nicht wirklich weiter. Vielleicht kannst du mir ja helfen?

Hier mein neuer Code:
Code:
$(document).ready(function() {
   var arr = [];
   $.get("list.xml", function(XMLmediaArray){
  $(XMLmediaArray).find("list").each(function(idx, v) {
  $(v).find("row").each(function( i , vi) {
       var sorter = $(vi).find("sorter").text();       
       var ProcessArea = $(vi).find("processarea").text();
       var PACode = $(vi).find("pacode").text();
       var DocumentID = $(vi).find("documentid").text();
       var Version = $(vi).find("version").text();
       var DocumentType = $(vi).find("documenttype").text();
       var DocumentTitle = $(vi).find("documenttitle").text();
       var ID = $(vi).find("id").text();
       var Deeplink_text = $(vi).find("deeplink").text();
       var EffectiveDate = $(vi).find("effectivedate").text();
       var deeplink = "";       
       if(Deeplink_text.indexOf("http://") != -1){
         deeplink = "<a href='"+Deeplink_text+"' target='_blank'>click here</a>";
         }else{
           deeplink = Deeplink_text;
           }
     
       var addData = [];       
         addData.push(sorter);
         addData.push(ProcessArea);
         addData.push(PACode);
         addData.push(DocumentID);
         addData.push(Version);
         addData.push(DocumentType);
         addData.push(DocumentTitle);
         addData.push(ID);
         addData.push(deeplink);
         addData.push(EffectiveDate);
       
       arr.push( addData ); 
     
  }); 
  });
 
   });
 
 
   console.log( arr );
 
   alert("loading Data"); 
 
   var thisTable;
   thisTable = $('table.tabs_datatable').dataTable({
  "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]]
  }).columnFilter({
       aoColumns: [
           null,
       {type: "select", values: ['example 1', 'example 2', 'example 3', 'example 4', 'example 5']},
          null,
          { type: "text" },
          null,
          { type: "select", values: [ 'PDF', 'DOC', 'RTF', 'ODT', 'XLS']  },
            { type: "text" },
            null,
            null,
            null
         ]
     });
   
  handleData(arr, 100);
});//-END- $(document).ready

function handleData(data, offset) {
  var size = Math.min(100, data.length - offset);

  thisTable.fnAddData(data, true); // geht nicht

  $.each(data, function(index, element){
    console.log( element );
    thisTable.fnAddData(element, true); //geht auch nicht
    });

  console.log( size );
   
  offset += size;
  if (offset < data.length) {
    console.log("offset < data.length - " +offset);
  window.setTimeout(function() { handleData(data, offset); }, 1);
  } else {
  console.log("data was handled. " + data.length);
  }
}
 
ok.

Das Verarbeiten in mehreren Päckchen klappt jetzt. Aber mal wieder nur in FireFox :(.
In IE8 passiert öhm.. gar nix.

Jedenfalls nichts in der DataTable.
Erstmal meckert der IE8 wegen den "console.log(..)" Befehlen und bleibt dort stehen. Also hab ich die wichtigsten als "Alert" gesetzt.

Die Alerts gibt es mir zwar im IE8 fast alle aus, nur ist der angezeigte Wert immer "0" und die DataTable bleibt dann logischer Weise leer. Er springt auch deshalb immer gleich in den Abschnitt "else" und gibt von der If-Schleife nur "data are loaded" aus.

Im FireFox läuft alles wie gewollt. Ich verstehe den IE nicht...

Ich habe auch schon versucht alle Werte mit "parseInt(..)" auch für den IE zu Zahlen zu konvertieren, aber das brachte auch nichts. Auch habe ich versucht die Funktion "fnAddData" von asynchron zu synchron und zurück zu wechseln in dem ich einen zweiten Parameter "false" bzw. "true" hinzugefügt hatte. Brachte auch nichts.

Was muss ich tun, damit der IE8 mit dem Script umgehen kann?
Ich verzweifle hier langsam...:confused:

Hier nochmal der Code:
Javascript:
var thisTable;

$(document).ready(function() {
   var arr = [];
   $.get("list.xml", function(XMLmediaArray){
  $(XMLmediaArray).find("list").each(function(idx, v) {
  $(v).find("row").each(function( i , vi) {
       var sorter = $(vi).find("sorter").text();        
       var ProcessArea = $(vi).find("processarea").text();
       var PACode = $(vi).find("pacode").text();
       var DocumentID = $(vi).find("documentid").text();
       var Version = $(vi).find("version").text();
       var DocumentType = $(vi).find("documenttype").text();
       var DocumentTitle = $(vi).find("documenttitle").text();
       var ID = $(vi).find("id").text();
       var Deeplink_text = $(vi).find("deeplink").text();
       var EffectiveDate = $(vi).find("effectivedate").text();
       var deeplink = "";        
       if(Deeplink_text.indexOf("http://") != -1){
         deeplink = "<a href='"+Deeplink_text+"' target='_blank'>click here</a>";
         }else{
           deeplink = Deeplink_text;
           }
      
       var addData = [];        
         addData.push(sorter);
         addData.push(ProcessArea);
         addData.push(PACode);
         addData.push(DocumentID);
         addData.push(Version);
         addData.push(DocumentType);
         addData.push(DocumentTitle);
         addData.push(ID);
         addData.push(deeplink);
         addData.push(EffectiveDate);
        
       arr.push( addData );  
      
  });  
  });
  
   });
    
   alert("loading Data");    
  
   thisTable = $('table.tabs_datatable').dataTable({
  "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]]
  }).columnFilter({
       aoColumns: [
           null,
       {type: "select", values: ['example 1', 'example 2', 'example 3', 'example 4', 'example 5']},
          null,
          { type: "text" },
          null,
          { type: "select", values: [ 'PDF', 'DOC', 'RTF', 'ODT', 'XLS']  },
            { type: "text" },
            null,
            null,
            null
         ]
     });
    
  handleData(arr, 100);
});//-END- $(document).ready

function handleData(data, offset) {
   alert("offset 1: " +offset);

   var size = Math.min(100, data.length - offset);
   offset_2 = offset + size;
   for(var i=offset; i < offset_2; i++)
   {
     thisTable.fnAddData(data[i]);    
   }
  
   alert("size: " +size); 
  
   offset += size;
  
   alert("offset 2: " +offset);
  
   if (offset < data.length) {
     alert("offset < data.length - " +offset);
     window.setTimeout(function() { handleData(data, offset); }, 1);
   } else {
     alert("data are loaded");
   }
}
 
Zuletzt bearbeitet:
Zurück