Question updated - IE8 XMLHTTP json code not working - innerHTML

Question

UPDATED: after some looking around, it appears that the issue is with IE8 and replacing innerHTML in tables, rather than the json code (see here). An alert proves that the json code is returning the expected text, but I can't for the life of me get it to shove into the spot I want it. Apparently there's a problem with innerHTML and table cells, and you can't replace an entire table's contents; you have to target a specific cell. However, I need to generate the contents of tbody - there isn't a single existing row or cell I can use.

================================================================================ I've been handed some code written by a developer who is no longer with the company. The code works with no problem in Firefox and Chrome, but does not work at all in IE (7 or 8). It is not throwing any errors; it just isn't displaying the response. Here are the two functions; can anyone help me out? I've only just gotten back into web work after 10 years with legacy apps, so I don't know where to start.

var xmlhttp;
var the_object = {};
var suggestions = [];

function loadXMLDoc(url) {
xmlhttp=null;

if (window.XMLHttpRequest) {// code for IE7, Firefox, Mozilla, etc.
    xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5, IE6
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

if (xmlhttp != null) {
    xmlhttp.onreadystatechange = onResponse;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
} else {
    alert("Your browser does not support XMLHTTP.");
}
}

function onResponse() {
if (xmlhttp.readyState!=4) return;
if (xmlhttp.status!=200) {
    alert("Problem retrieving XML data");
    return;
}

//JSON response code
the_object = eval('(' + xmlhttp.responseText + ')');
if (the_object.errMsg){
    alert(the_object.errMsg);
}else{
    **document.getElementById("shoppingCartTable").innerHTML = the_object.cartHTML;**
}

}

function searchMerchants(term){
url = "/merchant-list/?format=json&q=" + term;
loadXMLDoc(url);
}

function addToCart(id){
var denElem  = document.getElementById('item'+id+'_den');
var quanElem = document.getElementById('item'+id+'_quan');

if (denElem.options){
    var den = denElem.options[denElem.selectedIndex].value;
}else{
    var den = denElem.value;
}

var quan = quanElem.options[quanElem.selectedIndex].value;
var voucherNbr = document.getElementById("voucherNbr").value;

var url = "/redeem/add-to-cart/?action=add&format=json&voucherNbr=" + voucherNbr + "&merchantId=" + id + "&denomination=" + den + "&quantity=" + quan;
loadXMLDoc(url);
}

Answer 1

I found that if I generated the entire table via json rather than just the body, and targeting a span's innerHTML, it works fine.