[RESOLVED] Javascript Problem in IE

foid025 · #1 01-22-2007, 12:13 PM

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 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:

HTML Code:

<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

RobDavid · #2 01-22-2007, 12:29 PM

Im not sure if this is what's happening (but since you say all the alerts work in IE and Moz...and it displays in Moz )

IE for some reason doesn't display dynamically created/modified table elements the way the Moz does.

What I've found that works well (in both) is .innerHTML

So, a lot of times I'll dynamically create a table, create and append all it's childs....and then use a container to display that table (i.e. container.innerHTML = "<table>" + tmpTable.innerHTML + "</table>";

Its got to be a bug in IE?

foid025 · #3 01-22-2007, 12:36 PM

Hmm... Two questions (I can't try this out at the moment, but I will tomorrow): How do I go about creating a container? Like just a div or is this something else? And two: Could I create one big one to hold every element I create (so long as all the nodes come back to one parent), or do I have to make several?

And on a totally unrelated subject - how do I go about finding the position of an element (a table in this case)? I am using tableVariable.style.left and tableVariable.style.top, but it seems to be giving me coordinates relative to something. Each of these tables is in a cell (<td>) of another table. How do I get coordinates relative to the whole document? Or 'absolute' coordinates I suppose...

RobDavid · #4 01-22-2007, 02:43 PM

Quote:

Originally Posted by foid025

Hmm... Two questions (I can't try this out at the moment, but I will tomorrow): How do I go about creating a container? Like just a div or is this something else? And two: Could I create one big one to hold every element I create (so long as all the nodes come back to one parent), or do I have to make several?

And on a totally unrelated subject - how do I go about finding the position of an element (a table in this case)? I am using tableVariable.style.left and tableVariable.style.top, but it seems to be giving me coordinates relative to something. Each of these tables is in a cell (<td>) of another table. How do I get coordinates relative to the whole document? Or 'absolute' coordinates I suppose...

Yes, just have your container be an empty div or something (<div id='cnt1'></div>)

If i understand your question correctly, you could just have one big one...all of the parent/child relationships that you create dynamically will be still be maintained inside the main Div.

As far as your other question...Im not what sure what would be best for your situation. You would probably want to research some drag and drop scripts. They seem to have a lot of good methods for getting position of elements...Off the top of my head, I know offsetLeft and offsetTop will give you the position of the element relative to the parent? But I'm sure that there is something more like what you're looking for out there.

**Fang** · #5 01-22-2007, 03:02 PM

Element position

foid025 · #6 01-22-2007, 09:36 PM

Thank you very much for all your helps...

I got the coordinate thing working, thanks a lot for the link Fang.

As for the container thing, the way I tried it didn't work, but I'm not sure I'm doing things right. Here's my javascript code:

Code:

var containerDiv = document.createElement("span");
				containerDiv.innerHTML = "<table>" + browserEl.innerHTML + "</table>";
				document.appendChild(containerDiv);

browserEl is the table in which I attached all of the data. But perhaps a container isn't supposed to be a span? Or can't be attached directly to the document?

Any ideas? Thanks!

RobDavid · #7 01-23-2007, 09:23 AM

can you just use and already exsiting element?

script....
document.getElementById('container').innnerHTML = "<table>" + .........

html....
<div id="container"></div>

foid025 · #8 01-23-2007, 09:26 AM

RobDavid,
Thanks for your help. I managed to get the script working, now I'm just having trouble with my drag / drop utility (see the post in the Javascript forum).

Thanks for your help!
Geoffroy

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)