Hi all,
I have a page that modifies (using AJAX) a list of animal characteristics stored in a database. The page uses a PHP file to control the actual access to the database. Everything works except when a duplicate entry is entered. The PHP file prevents the duplicate entry from being added to the database and sends a message back to the AJAX function to alert the user. However, the AJAX function does not process the message.
I have setup an alert box to watch the onreadystatechange event and see a status code of 0 rather than the expected code of 200. I have tried setting the full domain name in the query string and using both GET and POST to no effect.
Here is the full html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Control Panel</title>
<style type="text/css">
@import url(cp.css);
</style>
<script type="text/javascript">
function showChar()
{
var xmlhttp=new XMLHttpRequest();
var url = "ctrPanelProc.php";
var params = "selection=getCharacteristics";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange = function()
{//Call a function when the state changes.
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("charList").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(params);
}
function addChar()
{
var xmlhttp=new XMLHttpRequest();
var characteristic = document.getElementById("txtAddChar").value;
var url = "ctrPanelProc.php";
var params = "selection=addCharacteristics&txtAddChar="+characteristic;
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange = function()
{//Call a function when the state changes.
alert("state = " + xmlhttp.readyState + " status = " + xmlhttp.status);
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.send(params)
}
function dellChar()
{
if(typeof(window.clickedCharID)!="undefined")
{
var xmlhttp=new XMLHttpRequest();
var characteristic = window.clickedCharID;
var url = "ctrPanelProc.php";
var params = "selection=delCharacteristics&txtDelChar=" + characteristic;
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange = function()
{//Call a function when the state changes.
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
}
}
xmlhttp.send(params)
}
}
</script>
</head>
<body>
<div id="wrapper">
<div class="grpWrapper">
<h2>Animal Characteristics</h2>
<script type="text/javascript">
showChar();
</script>
<div class="addCharGrp">
<form id="frmAddChar" name="frmAddChar" method="get" action="" onsubmit="addChar();">
<h3>Add A Characteristic</h3>
<p> </p>
<p>
<input name="txtAddChar" type="text" id="txtAddChar" size="30" maxlength="250" />
</p>
<p> </p>
<input type="submit" name="Submit" value="Submit" />
<input type="hidden" name="selection" value="addCharacteristics"/>
</form>
</div>
<div class="delCharGrp">
<h3>Delete Selected Characteristic</h3>
<p> </p>
<form id="frmDelChar" name="frmDelChar" method="get" action="" onsubmit="dellChar();">
<input type="submit" name="Submit" value="Submit" />
</form>
</div>
<div id="charList" class="listCharGrp"></div>
<script type="text/javascript">
document.getElementById("txtAddChar").focus();
</script>
</div> <!--End grpWrapper-->
</div> <!--End wrapper-->
</body>
</html>Here is the PHP file:
<?php
// ctrPanelProc.php
// Create the database connection
$link = mysql_connect('mySecretSite.com', 'user', 'password');
mysql_select_db("dbName");
// Filter the input
$selection = $_POST['selection'];
if ($selection != "getCharacteristics" and
$selection != "addCharacteristics" and
$selection != "delCharacteristics")
{
exit();
}
if ($_POST['txtAddChar'] != "")
{
$txtAddChar = $_POST['txtAddChar'];
if ( preg_match("/^[0-9]+:[X-Z]+$/D", $txtAddChar))
{
exit();
}
}
if ($_POST['txtDelChar'] != "")
{
$txtDelChar = $_POST['txtDelChar'];
if ( !is_numeric ($txtDelChar))
{
exit();
}
}
$cleanSelection = $selection;
$cleanTxtAddChar = $txtAddChar;
$cleanTxtDelChar = $txtDelChar;
// Inputs are now clean
// Process the selection
switch ($cleanSelection)
{
case 'getCharacteristics':
echo "<form id='frmShowChar' name='frmDelChar' action='' onsubmit='dellChar();'>";
$sql = "SELECT * FROM characteristic ORDER BY characteristic, characteristicID ASC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<input onclick='window.clickedCharID=this.value' type='radio' id='charID' name='charID' value='" .
$row['characteristicID'] . "'/> ID# ". $row['characteristicID'] . " " . $row['characteristic'] . "<br />" ;
}
echo "</form>";
break;
case 'addCharacteristics':
// Look for duplicate entry
$sql = "SELECT * FROM characteristic WHERE characteristic = '$cleanTxtAddChar'";
$result = mysql_query($sql);
//echo "<input name='dup' type='hidden' id='dup' value='false' />";
if ( mysql_num_rows($result) > 0 )
{
echo "Duplicate Entry!";
break;
}
// Insert entry into DB
$sql = "INSERT INTO characteristic (characteristic) VALUES ('$cleanTxtAddChar')";
mysql_query($sql);
break;
case 'delCharacteristics':
$sql = "DELETE FROM characteristic WHERE characteristicID = '$cleanTxtDelChar'";
mysql_query($sql);
break;
} //End switch $selection
?>I normally don't post this much code but I am at a total loss so I am hoping someone can spot what is wrong. Thanks for any help you can give me!
cmccully
