ahs10
12-07-2007, 03:42 PM
so i took this tutorial on ajax and tried to apply what i learned to do what i want it to do. it's not working. i think something's wrong with my javascript, particularly maybe with my onclick function, or the passing of the variables between js functions. i've posted my relevant code below, removing parts of the page that don't have anything to do with the ajax.
the form name is editEmailContacts which is inside a hidden div, made visible by scriptaculous, and trying to run editEmailContacts() onclick.
i am curious, this is a php page that starts off with $_GET to display variables below. does the ajax response need to have include these variables as well in order for the page to display correctly after the ajax communication?
<?php
session_cache_limiter('nocache');
include("php/dbConnect.php");
$recordID = $_GET['recordID'];
$userName = $_GET['userName'];
$userGroup = $_GET['userGroup'];
$userEmail = $_GET['userEmail'];
$record_query = "SELECT * FROM records WHERE record_id = '" . $recordID . "'";
$record_result = mysql_query($record_query) or die(mysql_error());
$record_row = mysql_fetch_array($record_result);
$comment_query = "SELECT * FROM comments WHERE comment_record = '" . $recordID . "' ORDER BY comment_date DESC";
$comment_result = mysql_query($comment_query) or die(mysql_error());
$comment_numRows = mysql_num_rows($comment_result);
?>
<!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=UTF-8" />
<title>Details For Record ID #<?php echo $recordID; ?></title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/popup.css" rel="stylesheet" type="text/css" />
<script src="js/scriptsBy10.js" type="text/javascript"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlHttp
function editEmailContacts() {
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("You are using an incompatible browser.")
return
}
var type=document.getElementById('additionalEmailType').value
var email=document.getElementById('additionalEmail').value
var url="editEmail.php"
url=url+"?email="+email
url=url+"&type="+type
url=url+"&recordID"+<?php echo $recordID; ?>
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged(type)
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged(type) {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
if (type=="replace") {
document.getElementById("contactEmail").innerHTML=xmlHttp.responseText
}
if (type=="include") {
document.getElementById("additionalEmails").innerHTML=xmlHttp.responseText
}
new Effect.BlindUp('editEmail');
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
</script>
</head>
<body>
<?php //removed irrelevant parts of the code here ?>
<div id="editEmail" style="display:none" class="hiddenDIV">
<div align="right" class="hiddenDIVheader">
<p>Edit Email Contacts </p></div>
<div align="center">
<form name="editEmailContacts">
<input type="hidden" value="<?php echo $record_row['record_id']; ?>" />
<p><input type="text" name="additionalEmail" id="additionalEmail" value="Enter Email Address" />
<?php
if ($record_row['record_additional_email_five'] != NULL) { ?>
<select name="additionalEmailType" id="additionalEmailType"><option value="replace" label="Replace Current Contact"></option><option value="include" label="Include As CC" disabled="disabled"></option></select><br>
The option to INCLUDE AS CC has been disabled, as there are already five additional email addresses for this record.</p>
<?php
} else { ?>
<select name="additionalEmailType" id="additionalEmailType"><option value="include" label="Include As CC"></option><option value="replace" label="Replace Current Contact"></option></select></p>
<?php
} ?>
<p><input type="submit" value="Update Email Contacts" onclick="editEmailContacts();" /> <input type="button" value="Nevermind" onclick="new Effect.SwitchOff('editEmail');" /></p>
</form>
</div>
</div>
<table width="100%" cellspacing="0" class="menuBar">
<tr><td> </td></tr>
<tr class="darkBG">
<td align="center"><input type="button" value="Update Status" onclick="new Effect.Appear('editStatus');" /></td>
<td align="center"><input type="button" value="Edit Email Contacts" onclick="new Effect.Appear('editEmail');" /></td>
<td align="center"><a href="history.php"><input type="button" value="View History" /></a></td></tr>
</table>
<br />
<table width="100%" border="1" class="border" cellspacing="0" cellpadding="4">
<?php //removed irrelevant parts of this table ?>
<tr>
<td>
<div id="contactEmail">Contact Email:<br />
<a href="mailto:<?php echo $record_row['record_user_email'] ?>"><?php echo $record_row['record_user_email'] ?></a>
</div>
</td>
<td colspan="3">
<div id="additionalEmails">Additional Emails (5 max):<br />
<?php
if ($record_row['record_additional_email_one'] == NULL) {
echo "None Added";
}
if ($record_row['record_additional_email_one'] != NULL) {
echo "<a href=\"mailto:" . $record_row['record_additional_email_one'] . "\">" . $record_row['record_additional_email_one'] . "</a>";
}
if ($record_row['record_additional_email_two'] != NULL) {
echo ", <a href=\"mailto:" . $record_row['record_additional_email_two'] . "\">" . $record_row['record_additional_email_two'] . "</a>";
}
if ($record_row['record_additional_email_three'] != NULL) {
echo ", <a href=\"mailto:" . $record_row['record_additional_email_three'] . "\">" . $record_row['record_additional_email_three'] . "</a>";
}
if ($record_row['record_additional_email_four'] != NULL) {
echo ", <a href=\"mailto:" . $record_row['record_additional_email_four'] . "\">" . $record_row['record_additional_email_four'] . "</a>";
}
if ($record_row['record_additional_email_five'] != NULL) {
echo ", <a href=\"mailto:" . $record_row['record_additional_email_five'] . "\">" . $record_row['record_additional_email_five'] . "</a>";
}
?>
</div>
</td>
</tr>
</table>
the form name is editEmailContacts which is inside a hidden div, made visible by scriptaculous, and trying to run editEmailContacts() onclick.
i am curious, this is a php page that starts off with $_GET to display variables below. does the ajax response need to have include these variables as well in order for the page to display correctly after the ajax communication?
<?php
session_cache_limiter('nocache');
include("php/dbConnect.php");
$recordID = $_GET['recordID'];
$userName = $_GET['userName'];
$userGroup = $_GET['userGroup'];
$userEmail = $_GET['userEmail'];
$record_query = "SELECT * FROM records WHERE record_id = '" . $recordID . "'";
$record_result = mysql_query($record_query) or die(mysql_error());
$record_row = mysql_fetch_array($record_result);
$comment_query = "SELECT * FROM comments WHERE comment_record = '" . $recordID . "' ORDER BY comment_date DESC";
$comment_result = mysql_query($comment_query) or die(mysql_error());
$comment_numRows = mysql_num_rows($comment_result);
?>
<!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=UTF-8" />
<title>Details For Record ID #<?php echo $recordID; ?></title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/popup.css" rel="stylesheet" type="text/css" />
<script src="js/scriptsBy10.js" type="text/javascript"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlHttp
function editEmailContacts() {
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("You are using an incompatible browser.")
return
}
var type=document.getElementById('additionalEmailType').value
var email=document.getElementById('additionalEmail').value
var url="editEmail.php"
url=url+"?email="+email
url=url+"&type="+type
url=url+"&recordID"+<?php echo $recordID; ?>
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged(type)
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged(type) {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
if (type=="replace") {
document.getElementById("contactEmail").innerHTML=xmlHttp.responseText
}
if (type=="include") {
document.getElementById("additionalEmails").innerHTML=xmlHttp.responseText
}
new Effect.BlindUp('editEmail');
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
</script>
</head>
<body>
<?php //removed irrelevant parts of the code here ?>
<div id="editEmail" style="display:none" class="hiddenDIV">
<div align="right" class="hiddenDIVheader">
<p>Edit Email Contacts </p></div>
<div align="center">
<form name="editEmailContacts">
<input type="hidden" value="<?php echo $record_row['record_id']; ?>" />
<p><input type="text" name="additionalEmail" id="additionalEmail" value="Enter Email Address" />
<?php
if ($record_row['record_additional_email_five'] != NULL) { ?>
<select name="additionalEmailType" id="additionalEmailType"><option value="replace" label="Replace Current Contact"></option><option value="include" label="Include As CC" disabled="disabled"></option></select><br>
The option to INCLUDE AS CC has been disabled, as there are already five additional email addresses for this record.</p>
<?php
} else { ?>
<select name="additionalEmailType" id="additionalEmailType"><option value="include" label="Include As CC"></option><option value="replace" label="Replace Current Contact"></option></select></p>
<?php
} ?>
<p><input type="submit" value="Update Email Contacts" onclick="editEmailContacts();" /> <input type="button" value="Nevermind" onclick="new Effect.SwitchOff('editEmail');" /></p>
</form>
</div>
</div>
<table width="100%" cellspacing="0" class="menuBar">
<tr><td> </td></tr>
<tr class="darkBG">
<td align="center"><input type="button" value="Update Status" onclick="new Effect.Appear('editStatus');" /></td>
<td align="center"><input type="button" value="Edit Email Contacts" onclick="new Effect.Appear('editEmail');" /></td>
<td align="center"><a href="history.php"><input type="button" value="View History" /></a></td></tr>
</table>
<br />
<table width="100%" border="1" class="border" cellspacing="0" cellpadding="4">
<?php //removed irrelevant parts of this table ?>
<tr>
<td>
<div id="contactEmail">Contact Email:<br />
<a href="mailto:<?php echo $record_row['record_user_email'] ?>"><?php echo $record_row['record_user_email'] ?></a>
</div>
</td>
<td colspan="3">
<div id="additionalEmails">Additional Emails (5 max):<br />
<?php
if ($record_row['record_additional_email_one'] == NULL) {
echo "None Added";
}
if ($record_row['record_additional_email_one'] != NULL) {
echo "<a href=\"mailto:" . $record_row['record_additional_email_one'] . "\">" . $record_row['record_additional_email_one'] . "</a>";
}
if ($record_row['record_additional_email_two'] != NULL) {
echo ", <a href=\"mailto:" . $record_row['record_additional_email_two'] . "\">" . $record_row['record_additional_email_two'] . "</a>";
}
if ($record_row['record_additional_email_three'] != NULL) {
echo ", <a href=\"mailto:" . $record_row['record_additional_email_three'] . "\">" . $record_row['record_additional_email_three'] . "</a>";
}
if ($record_row['record_additional_email_four'] != NULL) {
echo ", <a href=\"mailto:" . $record_row['record_additional_email_four'] . "\">" . $record_row['record_additional_email_four'] . "</a>";
}
if ($record_row['record_additional_email_five'] != NULL) {
echo ", <a href=\"mailto:" . $record_row['record_additional_email_five'] . "\">" . $record_row['record_additional_email_five'] . "</a>";
}
?>
</div>
</td>
</tr>
</table>