AJAX, Javascript DOM, Internet Explorer display issue. Works fine in firefox

I have a page where I use AJAX to gather specific information and then display on the page. The code works in firefox but does not work in IE. In IE the result is blank, but there is no javascript error. In firefox the result is displayed as it should be.

Here is my code. Please assume that the function receives a valid xml document as its parameter.

function display_manufacturers(xmldoc)
{
//get handle to the table
  var tbl = document.getElementById('categories_table');
  var list = xmldoc.getElementsByTagName("manufacturers")[0];
  var items = list.getElementsByTagName("manufacturer");

  //Create a table header / description
  var tr1 = document.createElement('tr');
  var th1 = document.createElement('td');
  var h21 = document.createElement('h3');
  h21.innerHTML = "Manufacturers";
  th1.appendChild(h21);
  tr1.appendChild(th1);
  tbl.appendChild(tr1);
 
 
  //now list the values
  for (var i = 0; i < items.length ; i++)
  {
    var item = items[i]
    var id = item.getElementsByTagName("id")[0].firstChild.nodeValue;
    var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
    var tr1 = document.createElement('tr');
    var td1 = document.createElement('td');
   
    td1.innerHTML = name;
    tr1.appendChild(td1);
    tbl.appendChild(tr1);
  }
  var tr1 = document.createElement('tr');
  var th1 = document.createElement('td');
 
  th1.innerHTML = "&nbsp;";
  tr1.appendChild(th1);
  tbl.appendChild(tr1);
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Here is the html that the above function appends to:

<div id="rightside">
      <div class="sectionheader" id="productcategories">
            <table id="categories_table">
                  <tr>
                        <th><h2>Product Categories</h2></th>
                  </tr>
            <table>
      </div>
</div>


Does something look wrong, or is there a bug I need to work around in IE with javascript and DOM?

Thanks!
LVL 17
jrm213jrm213Asked:
Who is Participating?
 
Lo-TanConnect With a Mentor Commented:
I believe that Mozilla working is a fluke in that they are somewhat laid back about their javascript.  IE is very picky, and you must perform the appendChild on the Table Body element the table instead:

var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
// Code here to create your table row
// when you are ready to append the row, do this
tbody.appendChild (tr1);

Otherwise, I'm almost certain IE ignores your request to add the new row.
0
 
ChetOS82Commented:
What happens if you put alert(name); just above td1.innerHTML = name;
0
 
jrm213jrm213Author Commented:
It correctly alerts the manufacturer's name in both IE and Firefox, but still does not display in IE.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Lo-TanCommented:
On a side note, you can also use the insertRow (integer) method of the table object:

var rowCount = tbl.rows.length;
var row = tbl.insertRow(rowCount); // Returns the new row
0
 
jrm213jrm213Author Commented:
Ok thanks,

I will try thr insertRow, I hadn't heard of that before, but in your other statement you are correct for IE to work you have to append to a tBodies[0], oddly though this does not work in Firefox. I have found a number of strange issues with the DOM and the differences between IE and Firefox such as setAttribute('class','yourclasshere') does not work in IE but does in firefox, but setAttribute('className','yourclasshere') does work in IE and does not work in Firefox. So you have to do both to get it to work in both browsers. It is a bit exasperating, and can really start to make you mad, I have to take breaks frequently :P.

In any case what I did was kind of annoying but I made a function like this

function appendToTable(tbl,tr)
{
   if (document.all)
  {
     tbl.tBodies[0].appendChild(tr);
  }
  else
  {
     tbl.appendChild(tr);
  }
}

I wonder if this is similar to how the insertRow() functions work.
I also noticed that if you are appending to an existing table ie getting your table as a reference to an existing table in your html the above works fine but if  you create the table with document.createObject('table') then you also need to append a tBody tag to it or IE will still fail.

Thanks for your help!
0
 
Lo-TanCommented:
Hmm the solution should have worked in Mozilla as well though, I will look in to it, I'm glad you got it working!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.