CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
user1013548
user1013548

Reputation: 1

Javascript innerHTML / jQuery .html() IE display bug - adding table to div

I am using an AJAX call to a script which generates an HTML table.

After getting the table's HTML from the script's output, I am replacing a target container div's HTML with the new HTML.

e.g. $('#table_container').html(data); or... document.getElementById('table_container').innerHTML(data);

In Firefox, the table is displayed within the div just as I want it to.

In Internet Explorer, the table is displayed, and then underneath the table, there is some extra text, usually 10-20 characters taken from a (seemingly) random location in the table.

I have validated the HTML from the ajax call through the W3C validator. I am using a doctype at the type of my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Why might IE be displaying this extra text?

Upvotes: 0

Views: 2825

Answers (4)

user1013548
user1013548

Reputation: 1

Thanks for the suggestions everyone.

As it turns out, the problem was because of blank cells in the table.

This will cause the errors:

<td></td>

This is acceptable:

<td> </td>

The strange thing (to me) was that if I dumped the HTML to a flat .html file and viewed it, there would be no problem. But when I used JS to add this same HTML markup to a div, then the problem occurs.

C'est la IE! :-)

Upvotes: 0

Matthewhall58
Matthewhall58

Reputation: 102

it sounds like there is some text in your string which is breaking the tables html.

Try using 

$string = htmlentities($string);

on the string that is in the table cells ......

Upvotes: 0

DefyGravity
DefyGravity

Reputation: 6011

I personally have always had better luck with:

$("#table_container").empty();
$("#table_container").append(data);

Upvotes: 2

JSager
JSager

Reputation: 1430

I don't know what the source of the underlying problem is, and I don't know if this will help, but you might try using remove() and appendTo() and see if IE treats it properly. In my experience this usually works better.

$(data).appendTo($('#table_container'));

Also, if it's possible to link to the actual site, I might be able to help further.

Upvotes: 0

Related Questions