hiddenFrame has no properties error
Folks,
I've bought the Ajax Pro book from Wrox and been running through the examples. I don't code much these days but wanted to familiarize myself with Ajax.
Almost straight away I cam off the rails sadly!
Firstly I did my own code and got the erros then I copied them out of the downloaded code and got the same. I've tried Firefix, Mozilla and IE and get the same error.
The essence of the Exercise in Chapter 2 basics is to query a very simple mySQL DB table and return the results to the same page (hidden Frame) you entered the queries from.
Heres my Display.html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Customer Account Information</title>
<script type="text/javascript">
function requestCustomerInfo() {
var sId = document.getElementById("txtCustomerId").value;
top.frames["hiddenFrame"].location = "GetCustomerData.php?id=" + sId;
}
function displayCustomerInfo(sText) {
var divCustomerInfo =document.getElementById("divCustomerInfo");
divCustomerInfo.innerHTML = sText;
}
</script>
</head>
<body>
<p>Enter customer ID number to retrieve information:</p>
<p>Customer ID: <input type="text" id="txtCustomerId" value="" /></p>
<p><input type="button" value="Get Customer Info" onclick="requestCustomerInfo()" /></p>
<div id="divCustomerInfo"></div>
</body>
</html>
Heres my hidden page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>hidden Frame Example 1</title>
</head>
<frameset rows="100%,0" frameborder="0">
<frame name="displayFrame" src="display.htm" noresize="noresize" />
<frame name="hiddenFrame" src="about:blank" noresize="noresize" />
</frameset>
</html>
Problem: When I enter say Cust ID "1" I get "top.frames.hiddenFrame has no properties" in Java script console. Nothing is dispalyed at all in the hidden frame below the query box (as it does in the example Chapter 2 Professional Ajax) DB seems sound and has error messages built in if this was getting upset in any way
PHP call to DB:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Get Customer Data</title>
<?php
//customer ID
$sID = $_GET["id"];
//variable to hold customer info
$sInfo = "";
//database information
$sDBServer = "localhost";
$sDBName = "AjaxDB";
// $sDBUsername = "root";
// $sDBPassword = "null";
//create the SQL query string
$sQuery = "Select * from Customers where CustomerId=".$sID;
//make the database connection
$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword );
@mysql_select_db($sDBName) or $sInfo = "Unable to open database";
if($sInfo == '') {
if($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0) {
$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
$sInfo = $aValues['Name']."<br />".$aValues['Address']."<br />".
$aValues['City']."<br />".$aValues['State']."<br />".
$aValues['Zip']."<br /><br />Phone: ".$aValues['Phone']."<br />".
"<a href=\"mailto:".$aValues['E-mail']."\">".$aValues['E-mail']."</a>";
} else {
$sInfo = "Customer with ID $sID doesn't exist.";
}
}
mysql_close($oLink);
?>
<script type="text/javascript">
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
};
</script>
</head>
<body>
<div id="divInfoToReturn"><?php echo $sInfo ?></div>
</body>
</html>
I've tried some remedies like placing "parent" and "Window" in various places as recommended but to no avail. Sorry if this is a very basic schoolboy error.
many thanks for your time
Paul
|