PHP Ajax Search

Question

BeerGuzler 0 Newbie Poster

17 Years Ago

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

<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

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 ?

php

4 Contributors
3 Replies
186 Views
1 Year Discussion Span
Latest Post 15 Years Ago Latest Post by it2051229

digital-ether 399 Nearly a Posting Virtuoso

17 Years Ago

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
<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
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

var xmlHttpfunction showUser(str)
{

should be

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.

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

I believe you want:

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

or simpler:

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Cybertronics 0 Newbie Poster · Answer 1 · 2009-01-18T06:23:03+00:00

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
<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
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 ?

Code so far is OK, only I do not think that this is a working search engine. This look almost exactly like code found here http://www.w3schools.com/PHP/php_ajax_database.asp, only a little bit modified.

it2051229 -3 Junior Poster in Training · Answer 2 · 2009-01-18T06:57:49+00:00

something is wrong on this area:

<form name="form" action="search.php" method="get">
  <input type="text" name="q" />
 <input type="submit" name="Submit" value="Search" />

what you're doing there is you're refreshing the whole page when the search button is triggered which defeats the purpose of ajax. Now you created search.js which will be responsible for contacting the search.php BUT the problem is, your interface does not call the JS FUNCTION for connecting.

here's my suggestion

<form name="myform">
  <input type="text" name="q" />
 <input type="button" name="button" value="Search" onclick="showUser()" />

now when the search button is click, it will call the showuser function from the javascript.... But there's still a problem, you need to pass the "NAME" to the server. At the moment the "NAME" is in the the text box and we're going to get that using javascript again.. so you might want to modify your searchUser function with something like:

function showUser()
{
     var str = document.myform.q.value;

     xmlHttp=GetXmlHttpObject();
     if (xmlHttp==null)
      {
          alert ("Browser does not support HTTP Request")
        return
      }

//rest of the code here
//...

you know AJAX is kindof long to explain, why dont you just follow the examples correctly provided on your tutorial? Because the way I see it you have syntax errors on your javascript.. oh and never ever do ajax if you don't know javascripting