Question

I’m using $.get to run through an XML file & return a the values in a table.

It works fine in Chrome/Firefox/Safari but only manages the table header in IE.

http://dl.dropbox.com/u/3755926/jQuery/jQuery_report.html

I’ve been reading about the order of how things are called being important to IE and also that it can’t automatically ignore syntax errors like other browsers, but I’ve been looking at it for too long & can’t see a problem. So any help would be appreciated.

This is my first attempt at jQuery outside of Codecademy so I’m a little lost for IE fixes & you’ll have to excuse the quality of code!

// File: report.js
function getXML() {
// Open the xml file
$.get("Default.ass", {}, function(xml) {
    // Build an HTML string
    myHTMLOutput = '';
    myHTMLOutput += '<table border="1" cellpadding="0" cellspacing="0">';
    myHTMLOutput += '<th colspan="2">Station</th><th>1st Left Turn</th><th>1st Right Turn</th><th>Look Up</th><th>Flare 1</th><th>Flare 2</th><th>Cut Away</th><th>Bergan Release</th><th>Turn Into Wind</th><th>Final Flare</th><th>Direction to Wind at 0ft</th><th>Distance From T</th><th>Entered Safe Zone</th>';

    // Run the function for each student tag in the XML file
    //$('AAR_Assessments',xml).each(function(i) {
    $(xml).find("student").each(function(i) {
        xml = $(this);
        //console.log("Got XML Tag");
        id = xml.attr("id");
        name = xml.attr("name");
        canopy = xml.attr("canopy");
        status = xml.attr("status");

        var LookUp = xml.find("LookUp"),
            TurnLeft = xml.find("TurnLeft"),
            TurnRight = xml.find("TurnRight"),
            Flare1 = xml.find("Flare1"),
            Flare2 = xml.find("Flare2"),
            CutAway = xml.find("CutAway"),
            Bergan = xml.find("Bergan"),
            TurnWind = xml.find("TurnWind"),
            Flare3 = xml.find("Flare3"),
            HeadWindOffSet = xml.find("HeadWindOffSet"),
            DistT = xml.find("DistT");

        LookUpTime = LookUp.attr("Time");
        LookUpAlt = LookUp.attr("Altitude");
        LookUpRes = LookUp.attr("Result");

        TurnLeftTime = TurnLeft.attr("Time");
        TurnLeftAlt = TurnLeft.attr("Altitude");
        TurnLeftRes = TurnLeft.attr("Result");

        TurnRightTime = TurnRight.attr("Time");
        TurnRightAlt = TurnRight.attr("Altitude");
        TurnRightRes = TurnRight.attr("Result");

        Flare1Time = Flare1.attr("Time");
        Flare1Alt = Flare1.attr("Altitude");
        Flare1Res = Flare1.attr("Result");
        Flare1L = Flare1.attr("Left");
        Flare1R = Flare1.attr("Right");

        Flare2Time = Flare2.attr("Time");
        Flare2Alt = Flare2.attr("Altitude");
        Flare2Res = Flare2.attr("Result");
        Flare2L = Flare2.attr("Left");
        Flare2R = Flare2.attr("Right");
        Flare2Error = Flare2.attr("Error");

        CutAwayTime = CutAway.attr("Time");
        CutAwayAlt = CutAway.attr("Altitude");
        CutAwayRes = CutAway.attr("Result");

        BerganTime = Bergan.attr("Time");
        BerganAlt = Bergan.attr("Altitude");
        BerganRes = Bergan.attr("Result");

        TurnWindTime = TurnWind.attr("Time");
        TurnWindAlt = TurnWind.attr("Altitude");
        TurnWindRes = TurnWind.attr("Result");

        Flare3Time = Flare3.attr("Time");
        Flare3Alt = Flare3.attr("Altitude");
        Flare3Res = Flare3.attr("Result");
        Flare3L = Flare3.attr("Left");
        Flare3R = Flare3.attr("Right");
        Flare3Error = Flare3.attr("Error");

        HeadWindOffSetDirection = HeadWindOffSet.attr("Direction");

        DistTD = DistT.attr("Distance");

        SafeZoneResult = xml.find("Safe").attr("Result");
        SafeError = xml.find("Safe").attr("Error");

        //console.log("Result: " + SafeZoneResult);

        // Build row HTML data and store in string
        mydata = BuildStudentHTML(id,name,canopy,status,LookUpTime,LookUpAlt,LookUpRes,TurnLeftTime,TurnLeftAlt,TurnLeftRes,TurnRightTime,TurnRightAlt,TurnRightRes,Flare1Time,Flare1Alt,Flare1Res,Flare1L,Flare1R,Flare2Time,Flare2Alt,Flare2Res,Flare2L,Flare2R,Flare2Error,CutAwayTime,CutAwayAlt,CutAwayRes,BerganTime,BerganAlt,BerganRes,TurnWindTime,TurnWindAlt,TurnWindRes,Flare3Time,Flare3Alt,Flare3Res,Flare3L,Flare3R,Flare3Error,HeadWindOffSetDirection,DistTD,SafeZoneResult,SafeError);
        myHTMLOutput = myHTMLOutput + mydata;
    });
    myHTMLOutput += '</table>';

    // Update the DIV called Content Area with the HTML string
    //console.log(myHTMLOutput);
    $("#ContentArea").append(myHTMLOutput);
});
}

function BuildStudentHTML(id,name,canopy,status,LookUpTime,LookUpAlt,LookUpRes,TurnLeftTime,TurnLeftAlt,TurnLeftRes,TurnRightTime,TurnRightAlt,TurnRightRes,Flare1Time,Flare1Alt,Flare1Res,Flare1L,Flare1R,Flare2Time,Flare2Alt,Flare2Res,Flare2L,Flare2R,Flare2Error,CutAwayTime,CutAwayAlt,CutAwayRes,BerganTime,BerganAlt,BerganRes,TurnWindTime,TurnWindAlt,TurnWindRes,Flare3Time,Flare3Alt,Flare3Res,Flare3L,Flare3R,Flare3Error,HeadWindOffSetDirection,DistTD,SafeZoneResult,SafeError){    

xmldata = new Array(id,name,canopy,status,LookUpTime,LookUpAlt,LookUpRes,TurnLeftTime,TurnLeftAlt,TurnLeftRes,TurnRightTime,TurnRightAlt,TurnRightRes,Flare1Time,Flare1Alt,Flare1Res,Flare1L,Flare1R,Flare2Time,Flare2Alt,Flare2Res,Flare2L,Flare2R,Flare2Error,CutAwayTime,CutAwayAlt,CutAwayRes,BerganTime,BerganAlt,BerganRes,TurnWindTime,TurnWindAlt,TurnWindRes,Flare3Time,Flare3Alt,Flare3Res,Flare3L,Flare3R,Flare3Error,HeadWindOffSetDirection,DistTD,SafeZoneResult,SafeError)

$.trim(xmldata);
//$(xmldata).each(function(){$(this).addClass("xmldata");});
$.each(xmldata, function(i,elem){
    $(elem).addClass('xmldata');
});

// Build HTML string and return
output = '';
output += '<tr>';
output += '<td><span class="id">' + id + '</span></td>';
output += '<td>'+ name + '<br />'+' <span class="xmllabel">canopy: </span> '+ canopy + '<br /> <span class="xmllabel">status: </span> ' + status +'</td>';
output += '<td align="center">'+ TurnLeftAlt + '<span class="xmllabel">ft</span> '+'<br />' + TurnLeftTime +'</td>';
output += '<td align="center">'+ TurnRightAlt + '<span class="xmllabel">ft</span> '+'<br />' + TurnRightTime +'</td>';
output += '<td align="center">'+ LookUpAlt + '<span class="xmllabel">ft</span> '+'<br />'+  LookUpTime +'</td>';
output += '<td align="center">'+ Flare1Alt + '<span class="xmllabel">ft</span> '+'<br />' + Flare1Time +'<br />' + 'L' + Flare1L + '% R' + Flare1R + '% </td>';
output += '<td align="center">'+ Flare2Alt + '<span class="xmllabel">ft</span> '+'<br />' + Flare2Time +'<br />' + 'L' + Flare2L + '% R' + Flare2R + '%</td>';
output += '<td align="center">'+ CutAwayAlt + '<span class="xmllabel">ft</span> '+ '<br />' + CutAwayTime +'</td>';
output += '<td align="center">'+ BerganAlt + '<span class="xmllabel">ft</span> '+'<br />'+ BerganTime +'</td>';
output += '<td align="center">'+ TurnWindAlt + '<span class="xmllabel">ft</span> '+'<br />'+ TurnWindTime +'</td>';
output += '<td align="center">'+ Flare3Alt + '<span class="xmllabel">ft</span> '+'<br />' + Flare3Time +'<br />' + 'L' + Flare3L + '% R' + Flare3R + '%</td>';
output += '<td align="center">'+ HeadWindOffSetDirection + '<span class="xmllabel">&#176;</span> </td>';
output += '<td align="center">'+ DistTD + '<span class="xmllabel">ft</span> '+'</td>';
output += '<td align="center" class=" '+ SafeZoneResult + '"></td>';
output += '</tr>';
return output;
}

// Start function when DOM has completely loaded 
$(document).ready(function(){getXML()}); 

Answer 1

It works in IE9 but not below. Remove the section

 xmldata = new Array( ......
 $.trim(xmldata);
 $.each(xmldata, function(i,elem){....

None of the variables are defined when this fires on page load. “trim” is a string operation, you can’t trim an array and your each is looping over an array of values( if they were defined) and trying to add class to them…they are not DOM elements