PDA

View Full Version : ajax problem, think something is wrong with my javascript



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&nbsp;&nbsp;&nbsp;</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>&nbsp;</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>

ahs10
12-07-2007, 05:13 PM
since i'm using scriptaculous, and thus prototype, i also checked into the ajax that comes with prototype too. i tried using it, same result. what am i doing wrong? when i click the button to initiate the ajax request, the hidden div goes away and the page looses all it's php variables. the information is not sent to my php script (which works by the way) and it's definitely not getting a response back because it's not running the line...

new Effect.BlindUp('editEmail');

i can post the js used for prototype attempt, but it's just copied right out of the manual. what am i doing wrong? thanks for any help you can offer!