# AJAX call causing page reload



## mjlicklid (Apr 15, 2010)

When making an AJAX call the progress bar starts a full page refresh then hangs. It only happens in IE. FireFox, Opera, Chrome, and Safari are fine.

THE CODE:
<html>
<head>
<script type="text/javascript">
// Global variable
loc = 0; // Stores the location of the SELECTED item in the list
boolTop = 0;
boolBottom = 0;
prevKey = 0;
origValue = "";

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, FireFox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
}

function GetCities(str, obj, obj2, event)
{
if (document.getElementById("div" + obj2).style.visibility = "visible")
{
document.getElementById("div" + obj2).style.visibility = "hidden";
}
xmlhttp = GetXmlHttpObject();
if (xmlhttp == null)
{
alert("Your browser does not support XMLHTTP!");
return;
}
if (str.length > 2)
{
if (window.event)
{ 
key = window.event.keyCode; 
} 
// FireFox
else if (event.which) 
{ 
key = event.which; 
}
if (key == 40)
{
document.getElementById("div" + obj).onkeydown(event);
}
else if (key == 38)
{
document.getElementById("div" + obj).onkeydown(event);
}
else // If not key down/up fetch more results
{
origValue = str;
document.getElementById("div" + obj).innerHTML = "";
var url = "/index.php?option=com_flightquote&format=raw";
url = url + "&f=city";
url = url + "&q=" + str;
url = url + "&o=" + obj;
url = url + "&o2=" + obj2;
url = url + "&sid=" + Math.random();

xmlhttp.onreadystatechange = stateChangedCities;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
}
else if (str.length < 3)
{
document.getElementById(obj2).value = "";
document.getElementById("div" + obj).style.visibility = "hidden";
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0;
}
}

function GetCodes(str, obj, obj2, event)
{
if (document.getElementById("div" + obj2).style.visibility = "visible")
{
document.getElementById("div" + obj2).style.visibility = "hidden";
}
xmlhttp = GetXmlHttpObject();
if(xmlhttp == null)
{
alert("Your browser does not support XMLHTTP!");
return;
}
if (str.length > 0)
{
if (window.event)
{ 
key = window.event.keyCode; 
} 
// FireFox
else if (event.which) 
{ 
key = event.which; 
}
if (key == 40)
{
document.getElementById("div" + obj).onkeydown(event);
}
else if (key == 38)
{
document.getElementById("div" + obj).onkeydown(event);
}
else // If not key down/up fetch more results
{
origValue = str;
document.getElementById("div" + obj).innerHTML = "";
var url = "/index.php?option=com_flightquote&format=raw";
url = url + "&f=code";
url = url + "&q=" + str;
url = url + "&o=" + obj;
url = url + "&o2=" + obj2;
url = url + "&sid=" + Math.random();

xmlhttp.onreadystatechange = stateChangedCodes;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
}
else if (str.length == 0)
{
document.getElementById(obj2).value = "";
document.getElementById("div" + obj).style.visibility = "hidden";
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0; 
}
}

function stateChangedCities()
{
if(xmlhttp.readyState == 4)
{
text = xmlhttp.responseText;
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text); 
}

obj = xmlDoc.getElementsByTagName("obj")[0].childNodes[0].nodeValue;
obj2 = xmlDoc.getElementsByTagName("obj2")[0].childNodes[0].nodeValue;
document.getElementById("div" + obj).style.visibility = "visible";
setWidthCities(obj);

if (xmlDoc.getElementsByTagName("city").length == 0)
{
document.getElementById("div" + obj).style.visibility = "hidden";
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0;
}
else
{
for (i = 0; i < xmlDoc.getElementsByTagName("city").length; i++)
{ 
str = "javascript:valueSelected('" + xmlDoc.getElementsByTagName("city")_.childNodes[0].nodeValue + "', '" + obj + "', '" + xmlDoc.getElementsByTagName("code").childNodes[0].nodeValue + "', '" + obj2 + "');";
document.getElementById("div" + obj).innerHTML += "<div onmouseout=\"onMouseOut(this, event);return false;\" onmouseover=\"onMouseOver(this, event);return false;\" style=\"height:17pxpx;font-size:12px;line-height:17px;\"><a href=\"" + str + "\" style=\"font-family: Arial, Helvetica, Sans-Serif; color: #52594F;text-decoration:none;font-style:normal;font-weight:normal;\" name=\"" + xmlDoc.getElementsByTagName("code").childNodes[0].nodeValue + "\" >" + xmlDoc.getElementsByTagName("city").childNodes[0].nodeValue + " (" + xmlDoc.getElementsByTagName("code").childNodes[0].nodeValue + ")</a></div>";
}
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0; 
}

}
}

function stateChangedCodes()
{
if(xmlhttp.readyState == 4)
{
text = xmlhttp.responseText;
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text); 
}

obj = xmlDoc.getElementsByTagName("obj")[0].childNodes[0].nodeValue;
obj2 = xmlDoc.getElementsByTagName("obj2")[0].childNodes[0].nodeValue;
document.getElementById("div" + obj).style.visibility = "visible";
setWidthCodes(obj);

if (xmlDoc.getElementsByTagName("code").length == 0)
{
document.getElementById("div" + obj).style.visibility = "hidden";
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0;

}
else
{
for (i = 0; i < xmlDoc.getElementsByTagName("code").length; i++)
{ 
str = "javascript:valueSelected('" + xmlDoc.getElementsByTagName("code").childNodes[0].nodeValue + "', '" + obj + "', '" + xmlDoc.getElementsByTagName("city").childNodes[0].nodeValue + "', '" + obj2 + "');";
document.getElementById("div" + obj).innerHTML += "<div onmouseout=\"onMouseOut(this, event);return false;\" onmouseover=\"onMouseOver(this, event);return false;\" style=\"height:17px;font-size:12px;line-height:17px;\"><a href=\"" + str + "\" style=\"font-family: Arial, Helvetica, Sans-Serif; color: #52594F;text-decoration:none;font-style:normal;font-weight:normal;\" name=\"" + xmlDoc.getElementsByTagName("city").childNodes[0].nodeValue + "\" >" + xmlDoc.getElementsByTagName("code").childNodes[0].nodeValue + "</a></div>";
}
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0;
}

}
}

function valueSelected(str, obj, str2, obj2)
{
document.getElementById(obj).value = str;
document.getElementById(obj2).value = str2;
document.getElementById("div" + obj).style.visibility = "hidden";
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0;
}

function onMouseOut(obj, event)
{
obj.className = '';
}
function onMouseOver(obj, event)
{
p = obj.parentNode;
for (i = 0; i < p.childNodes.length; i++)
p.childNodes.className = '';
obj.className = 'active';
// set loc 
}
function onMouseDown(obj, event)
{
this.div = document.getElementById("div" + obj);
this.list = this.div.getElementsByTagName('div');

this.list[loc].className = '';
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0;
}

function onKeyDown(obj, obj2, event)
{
this.div = document.getElementById("div" + obj);
this.list = this.div.getElementsByTagName('div');
for (i = 0; i < this.list.length; i++)
this.list.className = '';

if (window.event)
{
key = window.event.keyCode;
}
else if (event.which) // Firefox
{
key = event.which;
}
if (key == 38 && loc == 0)
{
document.getElementById(obj).value = origValue;
this.list[loc].className = '';
document.getElementById(obj2).value = "";
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0;
document.getElementById(obj).focus();
}
if (key == 40)
{
if (loc == 0 && boolTop == 0 && prevKey != 38)
{
this.list[loc].className = 'active';
str = this.list[loc].getElementsByTagName('a')[0].innerHTML;
document.getElementById(obj2).value = this.list[loc].getElementsByTagName('a')[0].name;
if (str.indexOf("(", 0) >= 0)
{
index = str.indexOf("(", 0);
str = str.substring(0, index - 1);
}
document.getElementById(obj).value = str;
this.div.scrollTop = 0;
boolTop = 1;
}
else if (boolBottom == 0)
{
this.list[loc].className = '';
loc++;
this.list[loc].className = 'active';
str = this.list[loc].getElementsByTagName('a')[0].innerHTML;
if (str.indexOf("(", 0) >= 0)
{
index = str.indexOf("(", 0);
str = str.substring(0, index - 1);
}
document.getElementById(obj).value = str;
document.getElementById(obj2).value = this.list[loc].getElementsByTagName('a')[0].name;
this.div.scrollTop = loc * 17;
if (loc == this.list.length - 1)
boolBottom = 1; 
}
}
else if (key == 38 && loc != 0)
{
this.list[loc].className = '';
loc--;
this.list[loc].className = 'active';
str = this.list[loc].getElementsByTagName('a')[0].innerHTML;
if (str.indexOf("(", 0) >= 0)
{
index = str.indexOf("(", 0);
str = str.substring(0, index - 1);
}
document.getElementById(obj).value = str;
document.getElementById(obj2).value = this.list[loc].getElementsByTagName('a')[0].name;
this.div.scrollTop = loc * 17;
if (loc == 0)
boolTop = 0;
if (loc == this.list.length - 2)
boolBottom = 0;
prevKey = 38; 
}
}

function bodyClick()
{
document.getElementById('divcityDepart').style.visibility = "hidden";
document.getElementById('divcodeDepart').style.visibility = "hidden";
document.getElementById('divcityArrive').style.visibility = "hidden";
document.getElementById('divcodeArrive').style.visibility = "hidden";
document.getElementById('divlocOLeg1').style.visibility = "hidden";
document.getElementById('divcodOLeg1').style.visibility = "hidden";
document.getElementById('divlocDLeg1').style.visibility = "hidden";
document.getElementById('divcodDLeg1').style.visibility = "hidden";
document.getElementById('divlocOLeg2').style.visibility = "hidden";
document.getElementById('divcodOLeg2').style.visibility = "hidden";
document.getElementById('divlocDLeg2').style.visibility = "hidden";
document.getElementById('divcodDLeg2').style.visibility = "hidden";
document.getElementById('divlocOLeg3').style.visibility = "hidden";
document.getElementById('divcodOLeg3').style.visibility = "hidden";
document.getElementById('divlocDLeg3').style.visibility = "hidden";
document.getElementById('divcodDLeg3').style.visibility = "hidden";
document.getElementById('divlocOLeg4').style.visibility = "hidden";
document.getElementById('divcodOLeg4').style.visibility = "hidden";
document.getElementById('divlocDLeg4').style.visibility = "hidden";
document.getElementById('divcodDLeg4').style.visibility = "hidden";
document.getElementById('divlocOLeg5').style.visibility = "hidden";
document.getElementById('divcodOLeg5').style.visibility = "hidden";
document.getElementById('divlocDLeg5').style.visibility = "hidden";
document.getElementById('divcodDLeg5').style.visibility = "hidden";
loc = 0;
boolTop = 0;
boolBottom = 0;
prevKey = 0;
}

function setWidthCities(obj) {
if (navigator.userAgent.indexOf("MSIE") >= 0) {
document.getElementById("div" + obj).style.top = "65px";
document.getElementById("div" + obj).style.width = "213px";
if (obj.indexOf("locD", 0) >= 0)
document.getElementById("div" + obj).style.top = "179px";
}
else if (navigator.userAgent.indexOf("Firefox") >= 0) {
document.getElementById("div" + obj).style.top = "65px";
document.getElementById("div" + obj).style.width = "204px";
if (obj.indexOf("locD", 0) >= 0)
document.getElementById("div" + obj).style.top = "178px";
}
else if (navigator.userAgent.indexOf("Opera") >= 0) {
document.getElementById("div" + obj).style.top = "65px";
document.getElementById("div" + obj).style.width = "226px";
if (obj.indexOf("locD", 0) >= 0)
document.getElementById("div" + obj).style.top = "178px";
}
else if (navigator.userAgent.indexOf("Chrome") >= 0) {
// top & left
document.getElementById("div" + obj).style.top = "67px";
document.getElementById("div" + obj).style.left = "15px";
document.getElementById("div" + obj).style.width = "212px";
if (obj.indexOf("locD", 0) >= 0)
document.getElementById("div" + obj).style.top = "188px";
}
else if (navigator.userAgent.indexOf("Safari") >= 0) {
document.getElementById("div" + obj).style.top = "67px";
document.getElementById("div" + obj).style.left = "15px";
document.getElementById("div" + obj).style.width = "214px";
if (obj.indexOf("locD", 0) >= 0)
document.getElementById("div" + obj).style.top = "188px";
}
}

function setWidthCodes(obj) {
if (navigator.userAgent.indexOf("MSIE") >= 0) {
document.getElementById("div" + obj).style.top = "26px";
document.getElementById("div" + obj).style.left = "263px";
document.getElementById("div" + obj).style.width = "75px";
if (obj.indexOf("codD", 0) >= 0)
document.getElementById("div" + obj).style.top = "24px";
}
else if (navigator.userAgent.indexOf("Firefox") >= 0) {
document.getElementById("div" + obj).style.top = "26px";
document.getElementById("div" + obj).style.left = "254px";
document.getElementById("div" + obj).style.width = "66px";
if (obj.indexOf("codD", 0) >= 0)
document.getElementById("div" + obj).style.top = "23px";
}
else if (navigator.userAgent.indexOf("Opera") >= 0) {
document.getElementById("div" + obj).style.top = "26px";
document.getElementById("div" + obj).style.left = "276px";
document.getElementById("div" + obj).style.width = "65px";
if (obj.indexOf("codD", 0) >= 0)
document.getElementById("div" + obj).style.top = "23px";
}
else if (navigator.userAgent.indexOf("Chrome") >= 0) {
// top & left
document.getElementById("div" + obj).style.top = "29px";
document.getElementById("div" + obj).style.left = "268px";
document.getElementById("div" + obj).style.width = "75px";
if (obj.indexOf("codDL", 0) >= 0){
document.getElementById("div" + obj).style.top = "33px";
document.getElementById("div" + obj).style.left = "269px";
}
if (obj.indexOf("codOL", 0) >= 0)
document.getElementById("div" + obj).style.left = "269px"; 
}
else if (navigator.userAgent.indexOf("Safari") >= 0) {
document.getElementById("div" + obj).style.top = "29px";
document.getElementById("div" + obj).style.left = "270px";
document.getElementById("div" + obj).style.width = "53px";
if (obj.indexOf("codD", 0) >= 0)
document.getElementById("div" + obj).style.top = "33px";
}
}
</script>
</head>
<body>
<input name="cityDepart" id="cityDepart" type="text" size="30" value="<?php echo $cityDepart ?>" onkeyup="GetCities(this.value, 'cityDepart', 'codeDepart', event);return false;" autocomplete="off">
<div id="divcityDepart" onkeydown="onKeyDown('cityDepart', 'codeDepart', event);" onmousedown="onMouseDown('cityDepart', event);" style="top:58px;border:1px solid #7f9db9;border-top:0px;visibility:hidden;background:#FFFFFF;position:absolute;z-index:1001;width:156px;filter: alpha (opacity=100);opacity:100;overflow-y:auto;overflow-x:hidden;max-height:105px;white-space: nowrap;
" ></div>
</body>

PHP CODE:
<?php 
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

$f = $_GET["f"];
$q = $_GET["q"];
$o = $_GET["o"];
$o2 = $_GET["o2"];

if($f == "city")
{
GetCities($q, $o, $o2);
}
elseif ($f == "code")
{
GetCodes($q, $o, $o2);
}


function GetCities($str, $obj, $obj2)
{

$query = "SELECT city_state, airpor_abbrev FROM jos_airports_view WHERE city_state like '" . $str . "%' ORDER BY city_state";
$db =& JFactory::getDBO();

$db->setQuery($query, 0, 0);
$db->query();

$rows = $db->loadObjectList();

header("Content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
echo "<results>\n";
foreach($rows as $row)
{
$temp = str_replace("&", "&", $row->city_state);
$temp = str_replace("<", "<", $temp);
$temp = str_replace(">", ">", $temp);
$temp = str_replace("\"", """, $temp);
$temp = str_replace("'", "'", $temp);
echo "\t<city>" . $temp . "</city>\n";
$temp = trim($row->airpor_abbrev);
echo "\t<code>" . $temp . "</code>\n";
}
echo "<obj>" . $obj . "</obj>";
echo "<obj2>" . $obj2 . "</obj2>";
echo "</results>";
}

function GetCodes($str, $obj, $obj2)
{
$query = "SELECT airpor_abbrev, city_state FROM jos_airports_view WHERE airpor_abbrev like '" . $str . "%' ORDER BY airpor_abbrev";
$db =& JFactory::getDBO();

$db->setQuery($query, 0, 0);
$db->query();

$rows = $db->loadObjectList();

header("Content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
echo "<results>\n";
foreach($rows as $row)
{
$temp = str_replace("&", "&", $row->city_state);
$temp = str_replace("<", "<", $temp);
$temp = str_replace(">", ">", $temp);
$temp = str_replace("\"", """, $temp);
$temp = str_replace("'", "'", $temp);
$temp2 = trim($row->airpor_abbrev);
echo "\t<code>" . $temp2 . "</code>\n";
echo "\t<city>" . $temp . "</city>\n";
}
echo "<obj>" . $obj . "</obj>";
echo "<obj2>" . $obj2 . "</obj2>";
echo "</results>";
}

?>_


----------



## mjlicklid (Apr 15, 2010)

Clarification:

The ajax call is causing the progress bar to start moving and then the progress bar gets half way and IE freezes.

I've searched Google and some suggestions are to use a random number in the URL (I did that).

Any ideas?


----------



## mjlicklid (Apr 15, 2010)

I figured this specific problem out. There was a behavior attached to all the html elements (onpropertychange). I set behavior:none; and only one ajax call is made.

Now I need to fix a bunch of JavaScript errors.

I got an Object Expected error on the BODY tag.

An Expected Identifier on function onMouseOver(obj, event)

And an Expected ';' on style="behavior:none;..."


----------

