JS positioning in AJAX(PHP)

[Jesdisciple]

Using the W3Schools script as a base, I'm trying to imitate Google's Suggest drop-down table. I've tried positioning before and always get this same problem: The function is never entered, as if I misspelled it (which I didn't). See http://www.auto-chat.net/ccarter/test.php. Involved files:clienthint.js.php

<?php	require("ajax.js.php");?>txt1 = document.getElementById('txt1');txtHint = document.getElementById('txtHint');var xmlHttp;function showHint(str){	if (str.length == 0){ 		txtHint.innerHTML = '';		return;	}	xmlHttp = getXmlHttpObject();	if (xmlHttp == null){		alert ('Browser does not support HTTP Request');		return;	} 	var url = 'gethint.php';	url = url + "?q=" +str;	url = url + "&sid=" + Math.random();	xmlHttp.onreadystatechange = stateChanged;	xmlHttp.open("GET", url, true);	xmlHttp.send(null);} function stateChanged(){	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){		switch(xmlHttp.responseText){			case null:				txtHint.innerHTML = '';				txtHint.style.visibility = 'hidden';			default:				txtHint.innerHTML = xmlHttp.responseText;				txtHint.style.visibility = 'visible';		}	}}function accept(hint){	txt1.value = hint;	showHint(hint);}

ajax.js.php

function getXmlHttpObject(){	var xmlHttp;	try{		// Firefox, Opera 8.0+, Safari		xmlHttp = new XMLHttpRequest();	}catch (e){		// Internet Explorer		try{			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");		}catch (e){			try{				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");			}catch(e){				alert("Your browser does not support AJAX!");				xmlHttp = null;			}		}	}	return xmlHttp;}

gethint.php

<?php	// Fill up array with names	$a[] = "Anna";	$a[] = "Brittany";	$a[] = "Cinderella";	$a[] = "Diana";	$a[] = "Eva";	$a[] = "Fiona";	$a[] = "Gunda";	$a[] = "Hege";	$a[] = "Inga";	$a[] = "Johanna";	$a[] = "Kitty";	$a[] = "Linda";	$a[] = "Nina";	$a[] = "Ophelia";	$a[] = "Petunia";	$a[] = "Amanda";	$a[] = "Raquel";	$a[] = "Cindy";	$a[] = "Doris";	$a[] = "Eve";	$a[] = "Evita";	$a[] = "Sunniva";	$a[] = "Tove";	$a[] = "Unni";	$a[] = "Violet";	$a[] = "Liza";	$a[] = "Elizabeth";	$a[] = "Ellen";	$a[] = "Wenche";	$a[] = "Vicky";		//get the q parameter from URL	$q = $_GET["q"];		//lookup all hints from array if length of q>0	if (strlen($q) > 0){		for($i = 0; $i < count($a); $i++) if(strtolower($q) == strtolower(substr($a[$i], 0, strlen($q)))) $hints[] = "<div><a href=\"java script:accept('$a[$i]')\">$a[$i]</a></div>";	}		//Set output to "no suggestion" if no hints were found	//or to the correct values	if (count($hints) == 0) $response = null;	else $response = '<tr><td>' . implode('</td></tr><tr><td>', $hints) . '</td></tr>';		//output the response	echo $response;?>

position.js.php

function getPositionOf(element){	var top = 0;	var left = 0;	if (element.offsetParent){		left = element.offsetLeft		top = element.offsetTop		while (element = element.offsetParent){			left += element.offsetLeft			top += element.offsetTop		}	}	return [left, top];}function setPositionOf(element, left, top){	element.style.position = 'absolute';	element.style.left = left;	element.style.top = top;}function setPositionOf(element, posArr){	setPositionOf(element, posArr[0], posArr[1]);}function getCornerOf(element, whichCorner){	var topLeft = getPositionOf(element);	var out;	switch(whichCorner){		case 'topLeft':			out = topLeft;			break;		case 'topRight':			out = [topLeft[0] + element.width, topLeft[1]];			break;		case 'bottomLeft':			out = [topLeft[0], topLeft[1] + element.height];			break;		case 'bottomRight':			out = [topLeft[0] + element.width, topLeft[1] + element.height];			break;		default:			out = null;	}	return out;}

onKeyUp:Error: txtHint has no propertiesSource File: http://www.auto-chat.net/ccarter/clienthint.js.phpLine: 48

onLoad:JavaScript - http://www.auto-chat.net/ccarter/test.phpEvent thread: loadError:name: TypeErrormessage: Statement on line 4: Could not convert undefined or null to objectBacktrace: Line 4 of linked script http://www.auto-chat.net/ccarter/position.js.php if (element.offsetParent) Line 26 of linked script http://www.auto-chat.net/ccarter/position.js.php var topLeft = getPositionOf(element); Line 1 of script setPositionOf(txtHint, getCornerOf(txt1, "bottom-left")); At unknown location [statement source code not available]onKeyUp:JavaScript - http://www.auto-chat.net/ccarter/test.phpUnknown threadError:name: TypeErrormessage: Statement on line 48: Could not convert undefined or null to objectBacktrace: Line 48 of linked script http://www.auto-chat.net/ccarter/clienthint.js.php txtHint.innerHTML = xmlHttp.responseText; At unknown location [statement source code not available]

What am I doing wrong?

[justsomeguy]

I can't find this line from the Javascript error message:setPositionOf(txtHint, getCornerOf(txt1, "bottom-left"));But txt1 might not be defined at that point. It looks like you have that in the onload statement for the body. Have onload call a function that defines those variables before doing that, or just use getElementById instead of variables.

[Jesdisciple]

Yes, it's in the onLoad attribute, found at http://www.auto-chat.net/ccarter/test.php. (I didn't post the page code because I think the link's better.)I added an initialization function (startSuggest) and the menu now shows (as it did before I added some mystery code), but it's still not positioned. See it here: http://www.auto-chat.net/ccarter/test.php.EDIT: Well, the menu did show but now it doesn't.EDIT: The one on my computer works but overwriting the other doesn't fix it. Below, the working one comes first, then the other.test.php

<html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		<title>Untitled Document</title>		<script src="clienthint.js.php"></script>		<script src="position.js.php"></script>		<style type="text/css">			table#txtHint td{				border-width:thin;				border-color:#0000FF;				border-style: solid;				background-color: #3399FF;			}		</style>		<script type="text/javascript">			function startSuggest(){				txt1 = document.getElementById('txt1');				txtHint = document.getElementById('txtHint');				xmlHttp = getXmlHttpObject();				setPositionOf(txtHint, getCornerOf(txt1, "bottom-left"));			}		</script>	</head>	<body onLoad="startSuggest()">		<form> 			First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)">		</form>		<table id="txtHint" style="visibility:hidden; position:absolute;" border="1" bordercolor="#0000FF" cellpadding="0" cellspacing="0"></table>	</body></html>

clienthint.js.php

<?php	require("ajax.js.php");?>var txt1;var txtHint;var xmlHttp;function showHint(str){	if (str.length == 0){ 		txtHint.innerHTML = '';		return;	}	if (xmlHttp == null){		alert ('Browser does not support HTTP Request');		return;	} 	var url = 'gethint.php';	url = url + "?q=" +str;	url = url + "&sid=" + Math.random();	xmlHttp.onreadystatechange = stateChanged;	xmlHttp.open("GET", url, true);	xmlHttp.send(null);} function stateChanged(){	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){		switch(xmlHttp.responseText){			case null:				txtHint.innerHTML = '';				txtHint.style.visibility = 'hidden';			default:				txtHint.innerHTML = xmlHttp.responseText;				txtHint.style.visibility = 'visible';		}	}}function accept(hint){	txt1.value = hint;	showHint(hint);}

ajax.js.php

function getXmlHttpObject(){	var xmlHttp;	try{		// Firefox, Opera 8.0+, Safari		xmlHttp = new XMLHttpRequest();	}catch (e){		// Internet Explorer		try{			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");		}catch (e){			try{				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");			}catch(e){				alert("Your browser does not support AJAX!");				xmlHttp = null;			}		}	}	return xmlHttp;}

position.js.php

function getPositionOf(element){	var top = 0;	var left = 0;	if (element.offsetParent){		left = element.offsetLeft		top = element.offsetTop		while (element = element.offsetParent){			left += element.offsetLeft			top += element.offsetTop		}	}	return [left, top];}function setPositionOf(element, left, top){	element.style.position = 'absolute';	element.style.left = left;	element.style.top = top;}function setPositionOf(element, posArr){	setPositionOf(element, posArr[0], posArr[1]);}function getCornerOf(element, whichCorner){	var topLeft = getPositionOf(element);	var out;	switch(whichCorner){		case 'topLeft':			out = topLeft;			break;		case 'topRight':			out = [topLeft[0] + element.width, topLeft[1]];			break;		case 'bottomLeft':			out = [topLeft[0], topLeft[1] + element.height];			break;		case 'bottomRight':			out = [topLeft[0] + element.width, topLeft[1] + element.height];			break;		default:			out = null;	}	return out;}

gethint.php

<?php	// Fill up array with names	$a[] = "Anna";	$a[] = "Brittany";	$a[] = "Cinderella";	$a[] = "Diana";	$a[] = "Eva";	$a[] = "Fiona";	$a[] = "Gunda";	$a[] = "Hege";	$a[] = "Inga";	$a[] = "Johanna";	$a[] = "Kitty";	$a[] = "Linda";	$a[] = "Nina";	$a[] = "Ophelia";	$a[] = "Petunia";	$a[] = "Amanda";	$a[] = "Raquel";	$a[] = "Cindy";	$a[] = "Doris";	$a[] = "Eve";	$a[] = "Evita";	$a[] = "Sunniva";	$a[] = "Tove";	$a[] = "Unni";	$a[] = "Violet";	$a[] = "Liza";	$a[] = "Elizabeth";	$a[] = "Ellen";	$a[] = "Wenche";	$a[] = "Vicky";		//get the q parameter from URL	$q = $_GET["q"];		//lookup all hints from array if length of q>0	if (strlen($q) > 0){		for($i = 0; $i < count($a); $i++) if(strtolower($q) == strtolower(substr($a[$i], 0, strlen($q)))) $hints[] = "<div><a href=\"java script:accept('$a[$i]')\">$a[$i]</a></div>";	}		//Set output to "no suggestion" if no hints were found	//or to the correct values	if (count($hints) == 0) $response = null;	else $response = '<tr><td>' . implode('</td></tr><tr><td>', $hints) . '</td></tr>';		//output the response	echo $response;?>

-------------------------------------------------------------------------------------------------------------------------------------------------test.php (non-working)

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		<title>Untitled Document</title>		<script src="clienthint.js.php"></script>		<script src="position.js.php"></script>		<style type="text/css">			table#txtHint td{				border-width:thin;				border-color:#0000FF;				border-style: solid;				background-color: #3399FF;			}		</style>		<script type="text/javascript">			function startSuggest(){				txt1 = document.getElementById('txt1');				txtHint = document.getElementById('txtHint');				xmlHttp = getXmlHttpObject();				setPositionOf(txtHint, getCornerOf(txt1, "bottom-left"));			}		</script>	</head>	<body onLoad="startSuggest()">		<form> 			First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)">		</form>		<table id="txtHint" style="visibility:hidden; position:absolute;" border="1" bordercolor="#0000FF" cellpadding="0" cellspacing="0"></table>	</body></html>

clienthint.js.php (non-working)

<?php	require("ajax.js.php");?>var txt1;var txtHint;var xmlHttp;function showHint(str){	if (str.length == 0){ 		txtHint.innerHTML = '';		return;	}	if (xmlHttp == null){		alert ('Browser does not support HTTP Request');		return;	} 	var url = 'gethint.php';	url = url + "?q=" +str;	url = url + "&sid=" + Math.random();	xmlHttp.onreadystatechange = stateChanged;	xmlHttp.open("GET", url, true);	xmlHttp.send(null);} function stateChanged(){	if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){		switch(xmlHttp.responseText){			case null:				txtHint.innerHTML = '';				txtHint.style.visibility = 'hidden';			default:				txtHint.innerHTML = xmlHttp.responseText;				txtHint.style.visibility = 'visible';		}	}}function accept(hint){	txt1.value = hint;	showHint(hint);}

ajax.js.php (non-working)

function getXmlHttpObject(){	var xmlHttp;	try{		// Firefox, Opera 8.0+, Safari		xmlHttp = new XMLHttpRequest();	}catch (e){		// Internet Explorer		try{			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");		}catch (e){			try{				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");			}catch(e){				alert("Your browser does not support AJAX!");				xmlHttp = null;			}		}	}	return xmlHttp;}

position.js.php (non-working)

function getPositionOf(element){	var top = 0;	var left = 0;	if (element.offsetParent){		left = element.offsetLeft		top = element.offsetTop		while (element = element.offsetParent){			left += element.offsetLeft			top += element.offsetTop		}	}	return [left, top];}function setPositionOf(element, left, top){	element.style.position = 'absolute';	element.style.left = left;	element.style.top = top;}function setPositionOf(element, posArr){	setPositionOf(element, posArr[0], posArr[1]);}function getCornerOf(element, whichCorner){	var topLeft = getPositionOf(element);	var out;	switch(whichCorner){		case 'topLeft':			out = topLeft;			break;		case 'topRight':			out = [topLeft[0] + element.width, topLeft[1]];			break;		case 'bottomLeft':			out = [topLeft[0], topLeft[1] + element.height];			break;		case 'bottomRight':			out = [topLeft[0] + element.width, topLeft[1] + element.height];			break;		default:			out = null;	}	return out;}

gethint.php (non-working)

<?php	// Fill up array with names	$a[] = "Anna";	$a[] = "Brittany";	$a[] = "Cinderella";	$a[] = "Diana";	$a[] = "Eva";	$a[] = "Fiona";	$a[] = "Gunda";	$a[] = "Hege";	$a[] = "Inga";	$a[] = "Johanna";	$a[] = "Kitty";	$a[] = "Linda";	$a[] = "Nina";	$a[] = "Ophelia";	$a[] = "Petunia";	$a[] = "Amanda";	$a[] = "Raquel";	$a[] = "Cindy";	$a[] = "Doris";	$a[] = "Eve";	$a[] = "Evita";	$a[] = "Sunniva";	$a[] = "Tove";	$a[] = "Unni";	$a[] = "Violet";	$a[] = "Liza";	$a[] = "Elizabeth";	$a[] = "Ellen";	$a[] = "Wenche";	$a[] = "Vicky";		//get the q parameter from URL	$q = $_GET["q"];		//lookup all hints from array if length of q>0	if (strlen($q) > 0){		for($i = 0; $i < count($a); $i++) if(strtolower($q) == strtolower(substr($a[$i], 0, strlen($q)))) $hints[] = "<div><a href=\"java script:accept('$a[$i]')\">$a[$i]</a></div>";	}		//Set output to "no suggestion" if no hints were found	//or to the correct values	if (count($hints) == 0) $response = null;	else $response = '<tr><td>' . implode('</td></tr><tr><td>', $hints) . '</td></tr>';		//output the response	echo $response;?>

[Jesdisciple]

I've discovered that the difference between success and failure is how the server handles a null argument to a function (or other manifestation of a variable). getCorner() was returning null because of an error on my part. After I fixed that error, setPositionOf(element, posArr) went into an infinite loop due to a discrepancy between how JavaScript and Java handle arguments (JavaScript apparently doesn't allow function overloading), only breaking out (at the given URL) because the arguments became NaN and then null. I'm trying to fix this problem by renaming the functions.EDIT: The positioning works, but not how I had planned. See http://www.auto-chat.net/ccarter/test.php and how it positions the menu at the top-left. I had originally intended for it to be at the bottom, but the height of the text field was undefined. Any ideas for how to get around this?EDIT: Every text field has a height of 22px and a width of [6 times size plus 26]px.