JQuery Append/Html not working in IE7/8/8compatmode but does in FF/Chrome/Opera

Question

Going crazy trying to find this. Any help would be appreciated.

Problem is that this code does 'nothing' in IE7/8/8compatmode. Works fine in Chrome 15.0.8 and FF3.5, as well as Opera 11.60.

It uses a xml file to read via ajax, and then places it in the table. I've tried several things I'll detail after the code.

XML:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?> 
<issues>
 <issue>
  <id>12</id> 
  <emp>44</emp> 
  <author>1</author> 
  <comments>Example comments go here</comments> 
  <issueDate>12/5/2011</issueDate> 
  <modifiedBy /> 
  <modifiedDate /> 
  <modifiedComments /> 
  <pending>true</pending> 
  <valid>false</valid> 
  </issue>
</issues>

javascript:

<script type="text/javascript">
        $(document).ready(function () {
            grabIssues('2011/12/01', '2011/12/13');
        });
        function grabIssues(startDate, endDate) {
            $.ajax({
                type: "POST",
                url: "Ajax/mtlIssues.aspx",
                data: {
                startDate: startDate,
                endDate: endDate
                },
                dataType: ($.browser.msie) ? "text" : "xml",
                success: function (result) {
                    createIssues(result);
                }
            });
        }
        function createIssues(xml) {
            var data = "";
            //newIssueArray = [];
            $("issue", xml).each(function (id) {
                message = $("issue", xml).get(id);
                $id = $("id", message).text();
                $emp = $("emp", message).text();
                $author = $("author", message).text();
                $comments = $("comments", message).text();
                $issueDate = $("issueDate", message).text();
                $pending = $("pending", message).text();
                $valid = $("valid", message).text();
                //$("#empList").append("<tr><td>" + $emp + "</td><td>" + $issueDate + "</td><td>" + $comments + "</td><td>" + $pending + "</td></tr>");
                //newIssueArray.push("<tr><td>" + $emp + "</td><td>" + $issueDate + "</td><td>" + $comments + "</td><td>" + $pending + "</td></tr>");
                data += "<tr><td>" + $emp + "</td><td>" + $issueDate + "</td><td>" + $comments + "</td><td>" + $pending + "</td></tr>";
            });
            //$("#empList").html("");
            //for (i in newIssueArray) {
            //$("#empListDetails").append(newIssueArray[i]);
            //data += newIssueArray[i];
            //}
            //$("#empList").append("</table>");
            $("#empListDetails").html(data);
        }
</script>

partial html

<div id="empList" class="ui-widget">
            <table id='empListTable'>
                <thead>
                    <tr><th>Name</th><th>Date</th><th>Comments</th><th>Pending</th></tr>
                </thead>
                <tbody id='empListDetails'></tbody>
            </table>
        </div>

What I've tried: As you can tell by commented code left in, I've tried everything from creating an array to using a variable, to directly appending each to the page as it is detected.

• I've also tried to have just a blank div (empList) and create the entire table in the javascript and use the .html() to insert it. Didn't work. Nor did append.
• I've coded this several ways, and all work in FF/Chrome/Opera. But I can't even get IE7/8/8compatmode to even give me an error. Just nothing happens
• I upgraded JQuery to 1.7.1 from 1.4.2 and tried all variations again. Hoping it was perhaps a bug caught by the Jquery team and not my code directly. Didn't work.
• Also note, I removed the 'modified' portions from the javascript. It was there, but the issue has persisted before/after.
• This shows nothing entered at all on the f12/dev console in IE8. Isn't placing any text at all in there.

Any assistance would be appreciated.

Answer 1

never iterate the xml using DOM traversal methods, its very browser specific, try using $.parseXML