Menu
Hello. I’ve got a problem with a code that works perfectly in Firefox, and doesn’t in Internet Explorer (version 6). This is my first time dealing with Javascript, and in fact you might say I’ve jumped in over my head, but I would appreciate a little code critique, to see if we can fix or at least isolate the problem. You can see a working example of the code (in Firefox) at [url]http://www.zoopla.net/fileBrowser/fileBrowser.php
Here’s the main HTMl file, which just imports JS files and has a body onLoad method called up:
[code=html]<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”fileBrowser.css” />
<script type=”text/javascript” src=”fileBrowser.js”> </script>
<script type=”text/javascript” src=”itemDrag.js”> </script>
</head>
<body onload=”getBrowserFiles(<? echo $uid; ?>,-1);”>
<div id=”fileBrowser”>
<table id=”navBar”>
<tr>
<td class=”navBarItem” onClick=”processUp()” id=”upArrow”>Up</td>
<td class=”navBarItem” id=”fName”>Folder</td>
<td class=”navBarItem” id=”viewMode”>View</td>
<td class=”navBarSpacer”>|</td>
<td class=”navBarItem” id=”newItem”>New</td>
<td class=”navBarItem” id=”uploadItem”>Upload</td>
<td class=”navBarItem” id=”downloadFolder”>Download</td>
<td class=”navBarSpacer”>|</td>
<td class=”navBarItem” id=”renameFolder”>Rename</td>
<td class=”navBarItem” id=”deleteFolder”>Delete</td>
</tr>
</table>
</div>
<table id=”browser” cellpadding=”0″ cellspacing=”0″>
</table>
</div>
</body>
</html>
And here’s the meat of the application, the Javascript functions. I don’t believe you need to read more than the first bit of the getBrowserFiles() method. But essentially, the code works in Firefox, and not in IE – I haven’t tested other browsers. When I put ‘alert()’ calls in random spots in the JS file, they all seem to work, even in IE. Therefore, I think that the problem is with printing elements to the screen…
[CODE]
/**
* @author Geoffroy
*/
/*
* global variables
*/
var uid; //user ID
var upperFolder; //variable used to go up to previous folder in hiearchy
var dragStartX; //variable used when dragging items
var dragStartY;
var http_request;
/*
* Populates the browser with all the items
* in a given acount or folder
* parameters: user ID, folder ID (-1 for main folder)
* outcomes: gets item info from XML, creates table cells to represent items
*/
function getBrowserFiles(userID,ffid)
{
uid = userID;
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.documentElement;
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);
}
}
};
http_request.send(null);
}
/*
* Create an HTTP Request
* no parameters
* outcome: an HTTP request
*/
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;
}
Thank you for your help!
Geoffroy