Complete AJAX noob! php/ajax/ query db.

[iPixel]

So im starting to have the need to use AJAX. And i know it will come of great use to me. However i have ZERO clue how to get started.

 

What i need to do :

 

I have a text box - name = searchPPL.

I have a hidden div layer - name = DIRpop.

 

what i want to learn how to do is, do a name search against a MySQL db.

 

onKeyUp with each letter entered i would like for the value of the textbox be passed via javascript i assume into a file called suggestor.php which will then use the value passed to query the database and return the result to the javascript i guess so that i can use innerHTML = "result of mysql db goes here".

 

If anyone can help me out or point me in the right direction or a good site with a good example i'd greatly appreciate it.

 

Thanks to all who help.

[Zane]

google "AJAX tutorial"

http://www.google.com/search?q=AJAX+tutorial&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

 

 

The top results

#

AJAX Tutorial    · Internet

Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building.

www.w3schools.com/Ajax/Default.Asp - 23k - Cached - Similar pages -

Intro

Example

Database

ResponseXML

 

XML File

Server Script

Source

Browsers

More results from w3schools.com »

#

Ajax Tutorial    · Web Development

- 2 visits - 12/18/08

AJAX, the standard to build dynamic websites. How to build an AJAX page with examples. XMLHttpRequest methods and attributes.

www.xul.fr/en-xml-ajax.html - 28k - Cached - Similar pages -

#

Ajax Tutorial - Tutorial  · Web Development

This tutorial will introduce you to the basics of Ajax and show you how to send and receive data from a server without using a "Submit" button approach. ...

www.tizag.com/ajaxTutorial/ - 12k - Cached - Similar pages -

[iPixel]

Ok i got it working to a point. I need just a bit of help understanding why something is happening.

 

Got script from http://www.tizag.com/ajaxTutorial/ajax-javascript.php

 

My form >>

<form action="" method="get" name="searchBOX">
<td align="left">  
<input type="text" id="searchPPL" name="searchPPL" class="login_txt_box" autocomplete="off" onkeyup="showSuggestion(this.value)" onblur="hideSuggestion()" />
<input type="submit" value="Search" name="submit" id="submit" class="search_btn" onmouseover="CCon(this)" onmouseout="CCoff(this)" />
</td>
</form>

 

My Javascript >>

function showSuggestion(myvalue)
{
	document.getElementById("DIRpop").style.visibility = 'visible';
	ajaxFunction(myvalue);
}

function hideSuggestion()
{
	document.getElementById("DIRpop").style.visibility = 'hidden';
}

function ajaxFunction(q)
{
//alert(q);
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function()
{
	if(ajaxRequest.readyState == 4)
	{
		var ajaxDisplay = document.getElementById('DIRpop');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "../suggestor.php?q=" + q, true);
ajaxRequest.send(null); 
}

 

My Php code >>

$q = mysql_real_escape_string($_GET["q"]);

$SP_query = "SELECT * FROM syx_ad WHERE firstname LIKE '%$q%' OR lastname LIKE '%$q%'";
$SP_sql = mysql_query($SP_query) or die(mysql_error());

$display_string = "";
do
{
	$display_string.= $SP_result['firstname'] . " " . $SP_result['lastname'] . "<br />";
}
while($SP_result = mysql_fetch_assoc($SP_sql));

echo $display_string;

 

This works about 90%, although it has it's glitches, and im curious to understand why.

Let's use the name Jhonny Bravo as out test subject.

 

As i start to type J h o n n y ... everything works great but when i get to the space and start typing up the last name Jhonny B... the div layer no longer displays the names and just goes empty. Any clue why ?

[jackpf]

Are you encoding/decoding your GETS/POSTS?