Major AJAXness (for me)

FlyingIsFun1217 · July 12, 2008

Hey!

I've got a form with fields that I want updated according to the drop-down from a form above. Essentially, I've got posts that are saved in a database table, and the title for each post is in the drop-down. When the user selects an item in the drop-down, the according content should load from the database and fill the fields. Here's what I've got:

script.js

var xmlHttp

function updateContents(contentID, contentType)
{ 
xmlHttp = GetXmlHttpObject();

if(xmlHttp == null)
{
	alert("Please use an AJAX-compatible browser.");
	return;
}

var url="sendEditor.php?newsID=" + contentID + "$contentType=" + contentType;
xmlHttp.onreadystatechange = stateChanged(contentType);
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged(cType) 
{ 
if(xmlHttp.readyState == 4)
{
	if(cType == "title")
	{
		document.editForm.title.value = xmlHttp.responseText;
	}

	else if(cType == "content")
	{
		document.editForm.content.value = xmlHttp.responseText;
	}

	else if(cType == "number")
	{
		document.editForm.hiddenElement.value = xmlHttp.responseText;
	}

	else
	{
		alert("Invalid javascript data!");
	}
}
}

function GetXmlHttpObject()
{
var xmlHttp = null;

try
{
	// Firefox, Opera 8.0+, Safari
	xmlHttp = new XMLHttpRequest();
}

catch(e)
{
	// Internet Explorer
	try
	{
		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
	}

	catch(e)
	{
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

return xmlHttp;
}

editInclude.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Revolution Warfare Game</title>
	<meta name="keywords" content="revolution, warfare, game, fps, first, person, shooter, ogre, newton, 3d" />
	<meta name="description" content="A futuristic First-Person-Shooter using the Ogre graphics engine, and various other systems for networking, physics, etc. to create a truly revolutionary gaming experience." />
	<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
	<script src="script.js"></script>
	</head>
	<body>
	<div id="wrapper">
	<div id="header">
	<div id="logo">
	<h1><a href="index.php">Revolution Warfare</a></h1>
	</div>
	<div id="rss">
	<br>
	<br>
	<a href="news.rss">News Feed</a>
	</div>
	</div>
	<!-- end header -->
	<!-- start menu -->
	<div id="menu">
	<ul>
	<li><a href="index.php">Home</a></li>
	<li><a href="#">Media</a></li>
	<li><a href="team.html">Team</a></li>
	<li><a href="http://www.gamesportfolio.com/forum/">Forum</a></li>
	<li><a href="contact.html">Contact</a></li>
	</ul>
	</div>
	<div id="page">
	<div id="content">
		<form action="eiAction.php" method="post" onchange="updateContents(this.value, 'title'); updateContents(this.value, 'contents'); updateContents(this.value, 'number');">
			<select name="newsToEdit">

				<?php
					include('connectInfo.php');
					include('createConnection.php');

					$newsQuery = mysql_query('SELECT number, title, content FROM news ORDER BY number DESC');

					while($newsData = mysql_fetch_array($newsQuery, MYSQL_ASSOC))
					{
						$number = $newsData['number'];
						$title = $newsData['title'];

						echo '<option value="'.$number.'">'.$title.'</option>';
					}

					include('closeConnection.php');
				?>

			</select>
		</form>

		<br>
		<br>

		<form name="editForm" action="editAction.php" method="post">

			<input type="text" name="title">
			<br>';
			<textarea name="content" rows="10" style="width:50%"></textarea>
			<br>';
			<input type="submit" value="Edit News">';
			<input name="hiddenInput" type="hidden" value="">

		</form>

	</div>
	</div>

	</div>
	<div id="footer" align="center">
	<p class="legal">
	©2008 <a href="index.php">Revolution Warfare</a> Team
	<p class="links">
	<a href="http://validator.w3.org/check/referer" class="xhtml" title="This page consists of valid XHTML">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a>
	 • 
	<a href="http://jigsaw.w3.org/css-validator/check/referer" class="css" title="This page also consists of valid CSS">Valid <abbr title="Cascading Style Sheets">CSS</abbr></a>
	</p>
	</div>
	</div>
	</body>
	</html>

sendEditor.php

<?php
include('connectInfo.php');
include('createConnection.php');

$newsID = $_GET['newsID'];
$contentType = $_GET['contentType'];

$dataQuery = mysql_query('SELECT number, title, content FROM news WHERE number="'.$newsID.'"');
$resultData = mysql_fetch_array($dataQuery, MYSQL_ASSOC);

if($contentType == 'title')
{
	echo $resultData['title'];
}

elseif($contentType == 'content')
{
	echo $resultData['content'];
}

elseif($contentType == 'number')
{
	echo $resultData['number'];
}

else
{
	die();
}

include('closeConnection.php');
?>

Sorry if it seems like I'm dumping code all over the place, but it's the first time I've worked on anything with ajax (or for that matter, javascript), and it's a tough pill to swallow.

Thanks for taking your time to help me!

FlyingIsFun1217

FlyingIsFun1217 · July 12, 2008

Maybe the components whose values are being edited are not being edited right?

Right now I have the:

document.form.inputField.value = server's response;

But maybe that's not the right way to do it?

Wait... FF has a javascript debugger! Let's see...

FlyingIsFun1217

FlyingIsFun1217 · July 13, 2008

Well, after setting an alert, I've found that the url is being send with newsID=undefined. So basically, the 'this.value' in the function call is not returning the value from the item selected. Working on fixing this as we speak (well, mostly just me speaking).

FlyingIsFun1217

FlyingIsFun1217 · July 13, 2008

This thread is turning into a personal log, it seems. Well, as long as it might help someone else.

I've fixed it; seems I had the onchange in the form tag. Ugghhhh...

So now I need to figure out why I'm not getting the data.

FlyingIsFun1217

FlyingIsFun1217 · July 13, 2008

Put in alerts as to the state of the readyState of xmlHttp, and it's giving me 0, so... is it just forwarding though the code since it's not getting results fast enough? Why would I not get a result?

Thanks!

FlyingIsFun1217

corbin · July 13, 2008

You're using the callback incorrectly.

When ever you set a function with a parameter as a call back like that, it sets the callback as the return of the function.

For example,

arg1 = 'hello';

somecallback = SomeFunc(arg1);

function SomeFunc(arg) {

return arg;

}

Would set the callback to be hello();

You could do something like

xmlHttp.onreadystatechange = function() {

stateChanged(contentType);

}

That's probably not the root of you main problem, but it's somewhere to start.

FlyingIsFun1217 · July 13, 2008

Ah, duh. Guess it would be hard to get any data back to the function ran without a callback. Thanks for pointing that out.

Now the only problem, it seems, is that there is no response from the server. readyState returns as '4', which is good, but when I do the following:

alert("Response from server:\n" + xmlHttp.responseText);

I just get a dialog that says:

Response from server:

When I check the status, it gives me 200, so everything is apparently running just fine...

So nothing is being returned, even though I've made sure the script returns content (by running it by itself with the arguments)? Sorry if I'm not seeing this sorta stuff right away, but I'm REALLY new to javascript altogether.

FlyingIsFun1217

FlyingIsFun1217 · July 14, 2008

Looks like all I forgot was the & sign. I had mistyped the & in the url to send and used a $.

IT WORKS!

Thanks to everybody who helped

FlyingIsFun1217

Sign In

Major AJAXness (for me)

Recommended Posts

FlyingIsFun1217

Link to comment

Share on other sites

FlyingIsFun1217

Link to comment

Share on other sites

FlyingIsFun1217

Link to comment

Share on other sites

FlyingIsFun1217

Link to comment

Share on other sites

FlyingIsFun1217

Link to comment

Share on other sites

corbin

Link to comment

Share on other sites

FlyingIsFun1217

Link to comment

Share on other sites

FlyingIsFun1217

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information