AJAX everything works... except it doens't...?

**Zanahade** · 06-18-2010 01:38 PM

Ok I tried to to post this once already, but I can't find it, so sorry if this is a repost. I am new to AJAX and Java Script but I learn quick. I am trying to create a HTML page that calls to a php script for a form onload. The php script echos the form back to the js and it is suppose to insert it into the page. I am using Firebug in firefox to debug, trace, etc and everything seems like it is working except the form does not get entered into the page. I need some help.

Here is my JS code:

Code:

// Get the HTTP Object
function getHTTPObject(){
	if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest) return new XMLHttpRequest();
	else {
		alert("Your browser does not support AJAX.");
	return null;
	}
}

// Apply changes to the form
function setOutput(){
	if(httpObject.readyState == 4){
		word = httpObject.responseText;
		document.getElementById('email_form').innerHTML = word;
	}
}

// load the initial form from php back side
function EFload(){
	httpObject = getHTTPObject();
	if(httpObject != null) {
		httpObject.open("GET", "emailform.php?app=start", true);
		httpObject.send(null);
		httpObject.onreadystatechange = setOutput();
	}
}

Here is my PHP code:

Code:

<?php
	if (isset($_GET['app'])) {
		if($_GET['app'] == "start") {
			if (!isset ($error)){$error = "";}
			$xform = getform($error);
			echo $xform;
		}
		else {
			echo "<div class=\"error\">There seems to be an Issue loading the Email Form.</div>";
		}
		
	}
	function getform($error) {
		$err = 'class="error"';
		if (isset($error['email'])){
			$error_email = $err;
		}
		else {
			$error_email = '';
		}
		
		if (isset($error['comments'])){
			$error_comments = $err;
		}
		else {
		$error_comments = '';
		}
		$form =
'<table id="emailform_table">
	<tbody>
		<tr>
			<td class="label">
				<label' . $error_email . 'for="email">*Email Address</label>
			</td>
			<td class="field">
				<input id="email" type="text" size="20" maxlength="80" name="email">
			</td>
		</tr>
		<tr>
			<td class="label">
				<label' . $error_comments . 'for="comments">*Message</label>
			</td>
			<td class="field">
				<textarea id="comments" rows="6" cols="16" maxlength="1000" name="comments"></textarea>
			</td>
		</tr>
	</tbody>
</table> <input type="submit" value="Submit"> * = required Field';
		return $form;
	}
?>

Here is my HTML code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" src="emailform_script.js"></script>
		<link media="screen" type="text/css" href="style.css" rel="stylesheet">
	</head>
	<body onload="EFload()">
		<div id="page">
			<div id="head">
				<div id="title">
					<h1>Zan's Email Form Test Page</h1>
				</div>
				<div id="tl2">
					<h3>bla bla bla</h3>
				</div>
			</div>
			<div id="sidebar">
				<div class="sb_item">
					<p>Site created by <a href="http://www.zanahade.com"> Zanahade</a></p>
				</div>
				<div id="email_form" class="sb_item">
					email form
				</div>
				<div class="sb_item">
					<p>Insert some random cool thing here</p>
				</div>
			</div>
			<div id="main">
				Main page stuff... bla bla bla
			</div>
		</div>
	</body>
</html>

**tirna** · 06-18-2010 07:12 PM

Some of the problems I see are:

1) your onreadystatechange function is in the wrong spot.

2) I'm pretty sure that "httpObject.onreadystatechange = ..." is also in the wrong spot.

Maybe use this w3schools ajax function example as a guide to fix and debug your code.

**Sterling Isfine** · 06-19-2010 05:37 PM

Originally Posted by Zanahade

Code:

function EFload(){
	httpObject = getHTTPObject();
	if(httpObject != null) {
		httpObject.open("GET", "emailform.php?app=start", true);
		httpObject.send(null);
		httpObject.onreadystatechange = setOutput();
	}
}

That line should precede the call to send and it should be:

Code:

httpObject.onreadystatechange = setOutput;

The readystatechange handler should also check httpObject.status == 200

Thread: AJAX everything works... except it doens't...?

Thread Tools

Display

AJAX everything works... except it doens't...?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions