?
Solved

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

Posted on 2007-07-19
6
Medium Priority
?
714 Views
Last Modified: 2013-11-19
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!
0
Comment
Question by:jrm213jrm213
  • 3
  • 2
6 Comments
 
LVL 18

Expert Comment

by:ChetOS82
ID: 19525399
What happens if you put alert(name); just above td1.innerHTML = name;
0
 
LVL 17

Author Comment

by:jrm213jrm213
ID: 19525451
It correctly alerts the manufacturer's name in both IE and Firefox, but still does not display in IE.
0
 
LVL 4

Accepted Solution

by:
Lo-Tan earned 1000 total points
ID: 19528498
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:Lo-Tan
ID: 19528534
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
 
LVL 17

Author Comment

by:jrm213jrm213
ID: 19530284
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
 
LVL 4

Expert Comment

by:Lo-Tan
ID: 19530473
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question