dynamic ajax populated table not working in IE 8

Question

Hi all I've an IE8 issure, here's the code:

Html code:

  <table id=\"myTable\" border="1">

javascript function:

function loadTableContent() {

$.ajax({
    type : 'GET',
    url : '/sohara/viewResults.do',
    contentType : 'application/json; charset=utf-8',
    success : function(response) {
        result = response;

        var html_Table = '';
        html_Table += '<tr><th bgcolor="silver">Type</th>
                    <th bgcolor="silver">Quantity A</th>
                    <th bgcolor="silver">Quantity B</th></tr>';
        for ( var i = 0; i < result.length; i++) {
            html_Table += '<tr>';
            html_Table += '<td>'+result[i].description+'</td>';
            html_Table += '<td>'+result[i].quantityA+'</td>';
            html_Table += '<td>'+result[i].quantityB+'</td>';
            html_Table += '</tr>';          
        }   
        html_Table += '</table>';
        $("#myTable").append(html_Table);
    },
    error : function(response) {
        alert("Error");
    }
});
}

Always is perfect in Firefox, Chrome and Opera but in IE8 nothing is displayed in the table. How can I manage that?

why are you "escaping" the ID on your table? Try without that `\\`. — Matt, Oct 31 '12 at 14:53
why are some of your double quotes escaped and others are not? also, what does the console say? are there any errors? have you tried debugging into the success handler and looking at the response? — jbabey, Oct 31 '12 at 14:54
Have you tried using .html() instead of append? I think IE has some issue in the JS engine revolving around table manipulating and how it treats the DOM of it. — tgormtx, Oct 31 '12 at 14:54
In other browsers there are no problems, success handler returns the json array with all my data full working. No errors in ie8 console. — Fseee, Oct 31 '12 at 14:56

score 2 · Answer 1 · edited May 23 '17 at 10:25

I not 100% what is going on but some possibilities:

Your <table> element is incomplete, as it doesn't have an ending tag. I originally assumed that this was just because you were being concise and didn't include it in your example, but then I noticed you included </table> inside your JavaScript. You need to terminate the tag normally in HTML, like so:

<table id=\"myTable\" border="1"></table>

And then work with it in JavaScript (and remove the ending tag in you're appending from JS)

Furthermore, I think the HTML spec says that that table header rows (such as yours with the TH tag) should be wrapped in a <thead> element (e.g. <table><thead><tr><th>Header</th></tr></thead></table>, while body elements are then wrapped in a <tbody> element. Most browsers seem pretty good about parsing tables even without these, but I point it out as a possible source of your problem.
One last potential problem is that IE all the way up to IE9 cannot set innerHTML on tables. See IE9 createElement and setting innerHTML dropping tags on a set operation? and can't innerHTML on tbody in IE for more information. I don't know how JQuery updates table data. I think if they relied on this method we would see more questions here on SO about it, but who knows.

useful first part of your answer, see my answer – Fseee Oct 31 '12 at 16:31 — Fseee, Oct 31 '12 at 16:31

score 0 · Accepted Answer · edited May 23 '17 at 10:34

Working solution:

According to Matt first I declare the table this way:

<table id=\"myTable\" border="1"></table> // FULL working method

In fact IE8 automatically closes the html tag this way if I don't close it, causing several issues in appending new html code:

<table id=\"myTable\" border="1"></> // NOT working method

Then instead of using:

$("#myTable).append(html_Table);

I use:

$("#myTable).html(html_Table);

Obviously I have to remove from ajax:

html_Table += '</table>';

Full Working :)

dynamic ajax populated table not working in IE 8

2 Answers2