I am taking a class in AJAX. I have been testing the following files using an XAMPP portable server on my flash drive, and they work no problem locally. When I post them to my class server they do not work and I get the error in my Chrome console: "uncaught typeerror cannot call method 'getelementsbytagname' of null" (see where noted below in code comment).
Why would these files work locally but then not live? Purpose of the page is to input text to find customer names from an XML file, then populate the table with values from the XML file based on the letters typed in. If typed text is deleted, table updates accordingly, and if no text is present, then there is no table.
HTML:
<html>
<head>
<script>
function addToTable()
{
var input = document.getElementById("input");
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
if (XMLHttpRequestObject.overrideMimeType)
{
XMLHttpRequestObject.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject)
{
XMLHttpRequestObject.open("GET", "hw8a.php?sid=" + Math.random() + "&qu=" + input.value);
XMLHttpRequestObject.onreadystatechange =
function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
xmlDocument = XMLHttpRequestObject.responseXML;
if (xmlDocument.getElementsByTagName("Data").length == 0)
// ERROR APPEARS HERE: "uncaught typeerror cannot call method 'getelementsbytagname' of null"
{
not_there();
}
else
{
there(xmlDocument);
}
}
}
XMLHttpRequestObject.send(null);
}
}
function there(documentElement)
{
if (input != "")
{
not_there();
var nodeNames = new Array("CustomerID", "FirstName", "LastName", "Address", "ZipCode", "Phone");
var result = document.getElementById("result");
customerCount = documentElement.getElementsByTagName("Customer").length;
for(var i = 0; i < customerCount; i++)
{
var newRow = result.insertRow(i+1);
customerNode = documentElement.getElementsByTagName("Customer")[i];
for (var j = 0; j < nodeNames.length; j++)
{
var col = newRow.insertCell(j);
col.innerHTML = customerNode.getElementsByTagName(nodeNames[j])[0].firstChild.nodeValue;
}
}
}
}
function not_there()
{
var result = document.getElementById("result");
while(result.rows.length > 1)
{
result.deleteRow(1);
}
}
</script>
</head>
<body>
<h1 align="center">Choose Customer Information from the Database</h1>
<p align="center">Enter the last name of a customer here: <input id="input" type="text" onkeyup="addToTable();" /> and a table of customer data will appear below...</p>
<table align="center" cellspacing="5" id="result">
<tr><th>ID</th><th colspan="2">Name</th><th>Address</th><th>Zip</th><th>Phone</th></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>
PHP:
<?php
include "XMLParser.class";
header("Cache-Control: post-check=1,pre-check=2");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Content-type: text/xml");
echo '<?xml version="1.0"?>';
echo '<Data>';
$xml = file_get_contents('Customer.xml');
$parser = new XMLParser($xml);
$parser->Parse();
$input = $_GET["qu"];
$found = false;
foreach( $parser->document->customer as $customer)
{
if ($input == "")
{
echo "not_there()";
}
else if (stripos($customer->lastname[0]->tagData, $input) === 0)
{
$found = true;
echo '<Customer>';
echo '<CustomerID>' . $customer->customerid[0]->tagData . '</CustomerID>';
echo '<FirstName>' . $customer->firstname[0]->tagData . '</FirstName>';
echo '<LastName>' . $customer->lastname[0]->tagData . '</LastName>';
echo '<Address>' . $customer->address[0]->tagData . '</Address>';
echo '<ZipCode>' . $customer->zipcode[0]->tagData . '</ZipCode>';
echo '<Phone>' . $customer->phone[0]->tagData . '</Phone>';
echo '</Customer>';
}
}
echo '</Data>';
?>
Sample of XML:
<?xml version="1.0" encoding="UTF-8"?>
<Data>
<Customer>
<CustomerID>2</CustomerID>
<Phone>(999) 555-1111</Phone>
<FirstName>Something</FirstName>
<LastName>Something</LastName>
<Address>1234 Something Street</Address>
<ZipCode>99999</ZipCode>
</Customer>
. . .
</Data>