Hello all. I'm having a problem reading XML data obtained from an HTTP request. It works fine in Firefox - but not in IE! Here's some of the code:
To create the request (nothing new here...):
function createRequest()
{
var http_request = false;
if (window.XMLHttpRequest)
{
// Mozilla, Safari, ...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
// See note below about this line
}
}
else if (window.ActiveXObject)
{
// IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert(e.description);
}
}
}
if (!http_request)
{
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
return http_request;
}
using the request:
http_request = createRequest();
var requestURL = "getBrowserFiles.php?uid=" + escape(uid) + "&ffid=" + escape(ffid) + "&timeStamp=" + new Date().getTime();
http_request.open('GET', requestURL, true);
http_request.onreadystatechange = function()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200) //successful request
{
//parse the XML data into arrays
var xmlDoc = http_request.responseXML;
var errors = xmlDoc.getElementsByTagName("error");
var ids = xmlDoc.getElementsByTagName("id");
var names = xmlDoc.getElementsByTagName("name");
var types = xmlDoc.getElementsByTagName("type");
var dates = xmlDoc.getElementsByTagName("date");
var imgLinks = xmlDoc.getElementsByTagName("imgLink");
var upperFfid = xmlDoc.getElementsByTagName("upperFolder");
upperFolder = upperFfid[0].firstChild.nodeValue;
//if there are errors, display them
if(errors.length != 0)
{
for(var j=0; j<errors.length; j++)
{
alert("Error: " + errors[j].firstChild.nodeValue);
}
return false;
}
var rowCount = 0; //variable to organize table rows
var currentRow = -1; //row number in which cells should be created
var browserEl = document.getElementById("browser"); //file browser element (table)
//first table row
var trEl = document.createElement("tr");
browserEl.appendChild(trEl);
for(var i=0; i<ids.length; i++) //loop through each item
{
//get item data
var id = ids[i].firstChild.nodeValue;
var fName = names[i].firstChild.nodeValue;
var type = types[i].firstChild.nodeValue;
var fDate = dates[i].firstChild.nodeValue;
var imgLink = imgLinks[i].firstChild.nodeValue;
//create new row every three items
if(rowCount%3 == 0)
{
var trEl = document.createElement("tr");
browserEl.appendChild(trEl);
currentRow++;
rowCount = 0;
}
rowCount++;
//create the browser cell in which we'll put the item
var tdEl = document.createElement("td");
tdEl.setAttribute("id", "browserItemCell");
tdEl.setAttribute("position", "relative");
browserEl.getElementsByTagName("tr")[currentRow*4].appendChild(tdEl);
//create item text (item name, item type)
var itemName = document.createTextNode(fName);
var itemType = document.createTextNode(type);
var itemSpan = document.createElement("span");
itemSpan.appendChild(itemName);
itemSpan.appendChild(document.createElement("br"));
itemSpan.appendChild(itemType);
itemSpan.appendChild(document.createElement("br"));
//create item image
var imageEl = document.createElement("img");
imageEl.setAttribute("src", imgLink);
imageEl.setAttribute("align", "middle");
imageEl.setAttribute("hspace", "3px");
imageEl.setAttribute("id", "browserItemImage");
imageEl.setAttribute("alt", type);
//create table in which to put item info
var itemTableEl = document.createElement("table");
itemTableEl.setAttribute("id", "browserItem");
var itemTrEl = document.createElement("tr");
var itemTdImgEl = document.createElement("td");
itemTdImgEl.setAttribute("width", "70px");
var itemTdTextEl = document.createElement("td");
itemTdImgEl.appendChild(imageEl);
itemTdTextEl.appendChild(itemSpan);
itemTrEl.appendChild(itemTdImgEl);
itemTrEl.appendChild(itemTdTextEl);
itemTableEl.appendChild(itemTrEl);
//set table attributes to hold item ID and type
itemTableEl.setAttribute("itemID", id);
itemTableEl.setAttribute("itemType", type);
itemTableEl.style.zIndex = 50;
//make item draggable
Drag.init(itemTableEl);
itemTableEl.onDragStart = function(x,y)
{
this.style.zIndex = 99;
this.ondblclick = function() //open another item on click
{
var itemID = this.getAttribute("itemID");
var itemType = this.getAttribute("itemType");
if(itemType == "folder")
{
itemClicked(uid, "folder", itemID);
}
}
//save start coordinates for later
dragStartX = x;
dragStartY = y;
}
itemTableEl.onDragEnd = function(x,y)
{
//return to start coordinates
this.style.top = dragStartY;
this.style.left = dragStartX;
this.style.zIndex = 50;
}
itemTableEl.ondblclick = function() //open another item on click
{
var itemID = this.getAttribute("itemID");
var itemType = this.getAttribute("itemType");
if(itemType == "folder")
{
itemClicked(uid, "folder", itemID);
}
}
//append item table to the browser cell
browserEl.getElementsByTagName("td")[i*3].appendChild(itemTableEl);
}
}
else
{
alert("There was a problem with the request. Status: " + http_request.status);
}
}
};
now, if I try to read whats in xmlDoc (like by doing alert(xmlDoc); ), i get nothing... And yet this works perfectly in Firefox.
edit: Actually, it seems that the elements in the xmlDoc variable exist even in IE. That is, if i do an alert(fName), I get boxes indicating the names of each entry as it loops through it. (in IE I mean). So I guess the problem is with creating and attaching elements to the browser window. You can see the page at www.zoopla.net/fileBrowser/fileBrowser.php.
Any ideas? Thanks!
Geoffroy
