3 Replies - 2196 Views - Last Post: 20 January 2011 - 09:24 PM

#1 Delta_Echo   User is offline

  • D.I.C Addict

Reputation: 5
  • View blog
  • Posts: 722
  • Joined: 24-October 07

Simple Ajax project not working as expected

Posted 19 January 2011 - 11:43 AM

Hello all,

So i'm working on this ajax program that will:

* Take user input key press by key press, [Html <input type="text">]
* On keypress of <input>, javascript creates an xmlhttprequest object,
* Call backend.php with the users input as an argument, [in url argument of xmlhttprequest->open(,[this one])]
* Backend.php queries mysql database and returns matches to keyword search using users input, [in the form of an html table]
* Javascript injects [appends] return html from Backend.php into <div class="response">.

This is what I have so far, i will describe expectations and problems after code.

INDEX.PHP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="ajax.js"></script>
	</head>

	<body>
		<h1>Employee Database Viewer</h1>
		<div class="EDV">
			<p>Enter any part of the subject's name:</p>
			<input type="text"class="name_input" onkeydown="getNames()"/>
		</div>	
		<!-- <div class="response"> should be appended here -->
	</body>
</html>



BACKEND.PHP

<?php

	// Argument Variable, as provided by XMLHTTPREQUEST.open()
	$arg = $_GET['arg'];


	// Get Data
	echo "Arg = $arg";
	echo 'Mysql Go...';
	$link = mysql_connect('localhost','root','deltadelta1');
	echo 'Connected.';
	@mysql_select_db('company');
	echo 'Selected.';
	$query = "SELECT * FROM people WHERE (firstName LIKE '%$arg%' OR middleName LIKE '%$arg%' OR lastName LIKE '%$arg%')";
	echo 'Query set.';
	$return = mysql_query($query);
	echo 'Query Sent.';
	// Format and echo data as XML document
	
	$count = 0;
	while($count < mysql_num_rows($return))
	
	{
		 // Setup the relivent variables in this loop instance
		 $firstName = mysql_result($return, $count, 'firstName');
		 $middleName = mysql_result($return, $count, 'middleName');
		 $lastName   = mysql_result($return, $count, 'lastName');
		 
		 echo "<table>" .
		 		"<tr>" .
		 			"<td> $firstName  </td>" .
		 			"<td> $middleName </td>" .
		 			"<td> $lastName   </td>" .
		 	  	"</tr>" .
				"</table>";
		 $count++;
	}
?>



AJAX.JS
function getNames()
{
		// Call backend.php and do the XMLHTTPRequest stuff...
		var myxml = new XMLHttpRequest();
		myxml.open('GET','backend.php?arg=' + document.getElementByTagName('input').getAttribute('value'));
		myxml.send();
		xmlResponse = myxml.responseHTML;
		
		// insert response into DIV
		var responseDiv = new document.createElement('div');
		responseDiv.appendChild(xmlResponse);
		document.getElementsByTagName('body').appendChild(responseDiv);
		
}



MYSQL db script
CREATE TABLE 'company'.`people` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `firstName` varchar(45) DEFAULT NULL,
  `middleName` varchar(45) DEFAULT NULL,
  `lastName` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1$$



STYLE.CSS
h1
{
	width: 50%;
	
	color: black;

	font-family: 'Arial';
	text-align: center;
	font-size: medium; 

	
	border-bottom: black solid .05em;
	padding-bottom: .10em;
	margin-bottom: 2em;

}

.EDV
{
	width: 50%;
	border: black solid .10em;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: .5em;
}

.EDV p 
{
	display: inline;
	color: black;
	margin-right: 1em;

}

.name_input
{
	width: 60%; 
	background: white;
	border: black solid .10em;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: .10em;
}

.response
{
	width: 50%;
	border: black solid .10em;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: .5em;
	margin-top: 1em;
}



My problem Is that I am seeing no change in page content. I have tested backend.php as an independent and it works.


I'm new to Javascript, much less Ajax methods; so can anyone help me out?

Is This A Good Question/Topic? 0
  • +

Replies To: Simple Ajax project not working as expected

#2 Martyr2   User is online

  • Programming Theoretician
  • member icon

Reputation: 5256
  • View blog
  • Posts: 14,069
  • Joined: 18-April 07

Re: Simple Ajax project not working as expected

Posted 19 January 2011 - 12:29 PM

It is document.getElementsByTagName... notice the "s" on the end of "Elements". You are missing it on the fetch of input. Secondly, this is going to return an array, so you will have to index into that array... try document.getElementsByTagName("input")[0].value. Third, you have to setup a listener in ajax.js that will listen for the response. This is typically done using a "onreadystatechange" handler with an anonymous function...

myxml.onreadystatechange = function(){
   // Check for status code 200 (or readystate 4) and then write code you want to execute when response is received
}



Look up an ajax tutorial online and they will show you this type of handler along with examples of how to use it.

Hope this helps you out! :)

This post has been edited by Martyr2: 19 January 2011 - 12:30 PM

Was This Post Helpful? 1
  • +
  • -

#3 Delta_Echo   User is offline

  • D.I.C Addict

Reputation: 5
  • View blog
  • Posts: 722
  • Joined: 24-October 07

Re: Simple Ajax project not working as expected

Posted 19 January 2011 - 05:46 PM

Thanks Martyr2
Was This Post Helpful? 0
  • +
  • -

#4 Delta_Echo   User is offline

  • D.I.C Addict

Reputation: 5
  • View blog
  • Posts: 722
  • Joined: 24-October 07

Re: Simple Ajax project not working as expected

Posted 20 January 2011 - 09:24 PM

I have made some changes; and it still isn't working. Though I do have some debug information now (provided by google chrome's javascript console) :

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
myxml.onreadystatechange



So something is wrong with the function pointed to by onreadystatechange, but I don't know what.

Please note also, that I had to move my javascript code to the index.php page because when I call the function 'getNames()' fram the ajax.js file, I get this:

Uncaught ReferenceError: getNames is not defined
(anonymous function)http://localhost/:15
onkeypress



As if nothing in the ajax.js file has come into scope?

My new code is attached, this is a tarball snapshot of the project as is.
Attached File  proj.tar.gz (1.74K)
Number of downloads: 45

This post has been edited by Delta_Echo: 20 January 2011 - 09:33 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1