ajax search js doesn't work

garevn · 04-12-2011, 01:53 PM

hello i just found this site and having this problem i decited to join your community!!
I am new in programming and i would say i am not really skilled atm.. anyway!! To the point... I wan't an ajax products search, I have my html file called 'body.html. My php file call data.php and below is my js file.

[CODE]
var xmlHttp
function finding(str)
{
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null)
{
alert("Browser does not support HTTP Request")
return
}
var url="data.php"
url=url+"?productname="+str
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("result").innerHTML=xmlHttp.responseText
}
}
function stateChanged()
{
if(xmlHttp.readyState==4|| xmlHttp.readyState=="complete")
{
document.getElementById("result").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
}
[CODE]

When i try to right a value into the field i get the error i wrote into the code
"Browser does not support HTTP Request"
The html code contain

[CODE]
<script src="js3.js"></script>
</head>

<body>

<h2>Ajax Search Engine</h2>

<form>
search:
<input type="text" size="30" onkeyup="finding(this.value)"/>
</form>
<p>
<div id="Result"></div>
</p>
</body>
</html>
[CODE]

Sorry about any mistakes as i said i am new in programming.
Tnx hope for some answers!!

DanInMa · 04-12-2011, 05:53 PM

try this

Code:

var xmlHttp
function finding(str)
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
 xmlhttp = new XMLHttpRequest()
  }catch (E) {
   alert("Browser does not support HTTP Request")
return
  }
var url="data.php"
url=url+"?productname="+str
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("result").innerHTML=xmlHttp.responseText
}
}
function stateChanged()
{
if(xmlHttp.readyState==4|| xmlHttp.readyState=="complete")
{
document.getElementById("result").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
}

garevn · 04-12-2011, 06:43 PM

Really tnx man it seems really good code but it pops me an error on line 3 on

[CODE]
try {
[CODE]

And i cant figure out if it works or not

ok i changed some "{" and has no errors but still doesnt work, though it doent pops me error message like before.
Is it bossible my body.html code is wrong?

devnull69 · 04-13-2011, 06:40 AM

If you turn the code into a readable format using indentation you'll see that the code is missing a closing curly bracket } somewhere ... the reason most probably is that there are more "catch" statements than "try" statements which is illegal:

Code:

var xmlHttp
function finding(str)
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
         xmlhttp = new XMLHttpRequest()
      } catch (E) {         // illegal
         alert("Browser does not support HTTP Request")
         return
      }
   var url="data.php"
   url=url+"?productname="+str
   url=url+"&sid="+Math.random()
   xmlHttp.onreadystatechange=stateChanged
   xmlHttp.open("GET",url,true)
   xmlHttp.send(null)
}

It should be something like this:

Code:

var xmlHttp;
function finding(str) {
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
         xmlhttp = new XMLHttpRequest();
      }
   }
   if(!xmlhttp) {
         alert("Browser does not support HTTP Request");
         return;
   }
   var url="data.php";
   url=url+"?productname="+str;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);
}

garevn · 04-13-2011, 08:33 AM

tnx devnull for your answer too.
i tried it out but still pops an error on line 3.
I add an "{" at the end of line 2 and then had no errors but i had no results too...

devnull69 · 04-13-2011, 09:59 AM

ooh my bad ... I added the missing opening bracket { after the first function in the code above. Now it should be fine. Sometimes we are not testing each code line before we post here ... then you'll have to put some "common sense" into it :-)

garevn · 04-13-2011, 10:21 AM

its ok i added the missing bracket.
Any ideas why it doesnt display results?

devnull69 · 04-13-2011, 10:26 AM

Wow ok ... you solve one problem and stumble upon the next

Javascript is case sensitive so xmlhttp and xmlHttp are two different objects. Please change all appearances to the same case.

Second:

Code:

 || xmlHttp.readyState=="complete"

This part does not make any sense. You should replace it with

Code:

 && xmlHttp.status==200

garevn · 04-13-2011, 10:58 AM

tnx devnull for your time u spend on me. As i said i am new in programming soz about any mistakes!!
still it doesnt work....
i post u all 3 files u may find any mistakes...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js3.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

Code:

</head>

<body>
<form>
search: 
<input type="text" size="30" onkeyup="finding(this.value)"/>
</form>
<p><div id="Result"></div>
</p>
</body>
</html>

Code:

var xmlHttp;
function finding(str) {
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
         xmlhttp = new XMLHttpRequest();
      }
   }
   if(!xmlhttp) {
         alert("Browser does not support HTTP Request");
         return;
   }
   var url="data.php";
   url=url+"?productname="+str;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);
}
function stateChanged()
{
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById("result").innerHTML=xmlHttp.responseText
}
}
function stateChanged()
{
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById("result").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
}

PHP Code:


			
<?php require_once('../Connections/Mysitedb.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 

{

  if (PHP_VERSION < 6) {

    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  }



  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);



  switch ($theType) {

    case "text":

      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

      break;    

    case "long":

    case "int":

      $theValue = ($theValue != "") ? intval($theValue) : "NULL";

      break;

    case "double":

      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";

      break;

    case "date":

      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

      break;

    case "defined":

      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

      break;

  }

  return $theValue;

}

}



$colname_Recordset1 = "-1";

if (isset($_GET['productname'])) {

  $colname_Recordset1 = $_GET['productname'];

}

mysql_select_db($database_Mysitedb, $Mysitedb);

$query_Recordset1 = sprintf("SELECT manufacturer, productname, price FROM products WHERE productname = %s", GetSQLValueString($colname_Recordset1, "text"));

$Recordset1 = mysql_query($query_Recordset1, $Mysitedb) or die(mysql_error());

$row_Recordset1 = mysql_fetch_assoc($Recordset1);

$totalRows_Recordset1 = mysql_num_rows($Recordset1);

?>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>



<body>

<?php do { ?>

   <form id="form1" name="form1" method="post" action="">

    <table width="353">

    <tr>

      <td width="59">name:</td>

      <td width="282"><?php echo $row_Recordset1['productname']; ?></td>

    </tr>

    <tr>

      <td>brand:</td>

      <td><?php echo $row_Recordset1['manufacturer']; ?></td>

    </tr>

    <tr>

      <td>price</td>

      <td><?php echo $row_Recordset1['price']; ?></td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

    </tr>

  </table>



  </form>

  <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

</body>

</html>

<?php

mysql_free_result($Recordset1);

?>

devnull69 · 04-13-2011, 11:03 AM

Did you read my last post?

Quote:

Javascript is case sensitive so xmlhttp and xmlHttp are two different objects. Please change all appearances to the same case.

garevn · 04-13-2011, 11:24 AM

ups y i did that

Code:

var xmlHttp;
function finding(str) {
   try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
         xmlHttp = new XMLHttpRequest();
      }
   }
   if(!xmlHttp) {
         alert("Browser does not support HTTP Request");
         return;
   }
   var url="data.php";
   url=url+"?productname="+str;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);
}
function stateChanged()
{
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById("result").innerHTML=xmlHttp.responseText
}
}
function stateChanged()
{
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById("result").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
}

I changed and the div in htm from Result to result.

Now whatever letter i type into the search area it displayes

name:
brand:
price

nothing more...

devnull69 · 04-13-2011, 11:30 AM

This is definitely a PHP problem ... the Javascript ajax request is running fine and returning the PHP output. But PHP is not producing the right output.

Can you post your question on the PHP section?

garevn · 04-13-2011, 11:33 AM

ok i do and i will let u know tnx a lot man

garevn · 04-13-2011, 01:15 PM

ok solved m8s it had to do my database stracture nothing important tnx for the code help