PHP Ajax Search

•

What is DaniWeb IT Discussion Community?

You're currently browsing the PHP section within the Web Development category of DaniWeb, a massive community of 392,080 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,998 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our PHP advertiser: Lunarpages PHP Web Hosting

Thread Tools Display Modes

Views: 3927 | Replies: 1

•

Join Date: Apr 2007

Posts: 4

Reputation: BeerGuzler is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

BeerGuzler BeerGuzler is offline

Offline

Newbie Poster

PHP Ajax Search

Apr 9th, 2007

Hi,

I'm trying to put together a PHP Ajax search against an mySQL database yet doesnt seem to work .. HELP!

I had to resort to using frameset which I dont really want to do.

what I'm trying to is perform a search against a mysql database and display the results on the same page. Want the ability to perform multiple search without a refresh or change of page.

so far this is what i have
Index.html

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>
<div align="center"
<form name="form" action="search.php" method="get">
  <input type="text" name="q" />
 <input type="submit" name="Submit" value="Search" />

<div align="right">
<select name="list">
<option value="10"> 10 </option>
<option value="20"> 20 </option>
<option value="50"> 50 </option>
</select>
</div>
 
</form>
</div>
<div id="txtHint"><b>User info will be listed here.</b></div>
</body>
</html>

Searchuser.js

Help with Code Tags

(Toggle Plain Text)

var xmlHttpfunction showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="search.php"
url=url+"?q="+str+"?list="
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
 
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText
 }
}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;
}

The code calls a search.php which performs the search against the database and creates the tables.

Search.php echos the tables using DIV .
Any ideas on how to improve this ?

•

Join Date: Sep 2005

Posts: 641

Reputation: digital-ether has a spectacular aura about

Rep Power: 5

Solved Threads: 38

digital-ether digital-ether is online now

Online

Practically a Master Poster

Re: PHP Ajax Search

Apr 11th, 2007

•

Originally Posted by BeerGuzler

Hi,

I'm trying to put together a PHP Ajax search against an mySQL database yet doesnt seem to work .. HELP!

I had to resort to using frameset which I dont really want to do.

what I'm trying to is perform a search against a mysql database and display the results on the same page. Want the ability to perform multiple search without a refresh or change of page.

so far this is what i have
Index.html
Help with Code Tags

(Toggle Plain Text)
<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>
<div align="center"
<form name="form" action="search.php" method="get">
  <input type="text" name="q" />
 <input type="submit" name="Submit" value="Search" />

<div align="right">
<select name="list">
<option value="10"> 10 </option>
<option value="20"> 20 </option>
<option value="50"> 50 </option>
</select>
</div>
 
</form>
</div>
<div id="txtHint"><b>User info will be listed here.</b></div>
</body>
</html>
<html> <head> <script src="selectuser.js"></script> </head> <body> <div align="center" <form name="form" action="search.php" method="get"> <input type="text" name="q" /> <input type="submit" name="Submit" value="Search" /> <div align="right"> <select name="list"> <option value="10"> 10 </option> <option value="20"> 20 </option> <option value="50"> 50 </option> </select> </div> </form> </div> <div id="txtHint"><b>User info will be listed here.</b></div> </body> </html>
Searchuser.js
Help with Code Tags

(Toggle Plain Text)
var xmlHttpfunction showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="search.php"
url=url+"?q="+str+"?list="
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
 
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText
 }
}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;
}
var xmlHttpfunction showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="search.php" url=url+"?q="+str+"?list=" url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } }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; }
The code calls a search.php which performs the search against the database and creates the tables.

Search.php echos the tables using DIV .
Any ideas on how to improve this ?

What error(s) are you getting? Or what isn't happening?

There are a couple of syntax errors in your JS.

Searchuser.js

Help with Code Tags

(Toggle Plain Text)

var xmlHttpfunction showUser(str)
{

should be

Help with Code Tags

(Toggle Plain Text)

var xmlHttp

function showUser(str)
{

Probably best to end all your JS commands with the semi-colon. This allows more than one on a line without having syntax errors. (Useful if you want to compress your JS also)

The URL you are creating will have two ? in it.

Help with Code Tags

(Toggle Plain Text)

var url="search.php"
url=url+"?q="+str+"?list="
url=url+"&sid="+Math.random()

I believe you want:

Help with Code Tags

(Toggle Plain Text)

var url="search.php";
url=url+"?q="+str+"&list=";
url=url+"&sid="+Math.random();

or simpler:

Help with Code Tags

(Toggle Plain Text)

var url="search.php";
url += "?q="+str+"&list=";
url += "&sid="+Math.random();

Last edited by digital-ether : Apr 11th, 2007 at 3:05 pm.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!