My ajax is properly working in chrome and ie but not in firefox 3.6..

[ghopz]

here are my codes

searchByCategor yForm.php

<!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></title>
		<link rel="stylesheet" type="text/css" href="style2.css" />
		<script type="text/javascript" src="init.js"></script>
		<script type="text/javascript" src="search.js"></script>
	</head>
	<body onload='initRequest()'>
			<div>
				Search By:<select name="category" id="category" onChange="searchCategory()">
					<option value="name">Name</option>
					<option value="serviceID">ServiceID</option>
				</select>
				<input name="search" type="text" id='search' size="40" onKeyup="searchCategory()">
				<div id="searchResult"></div>
			</div>
	</body>
</html>

init.js

var http;
function initRequest()
{
	if (window.XMLHttpRequest) 
	{
		http = new XMLHttpRequest();
	} 
	else if (window.ActiveXObject) 
	{
		http = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

search.js

function searchCategory()
{
	var category=document.getElementById("category").value;
	
	
    if (category=='serviceID')
	{
		if(document.getElementById("search").value.length==2)
		{
			var format=(document.getElementById("search").value)+"-LP-"
			document.getElementById("search").value=format;
		}
	}
	var snput=document.getElementById("search").value;
	var params="category="+category+"&nput="+snput;
	var url="searchByCategory.php";
	searchCat(url,params);
}

function searchCat(url,params)
{
	http.open("POST", url, true);

	//Send the proper header information along with the request
	http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	http.setRequestHeader("Content-length", params.length);
	http.setRequestHeader("Connection", "close");

	http.onreadystatechange = function() 
	{//Call a function when the state changes.
		if(http.readyState == 4 && http.status == 200) 
		{
			
			x=http.responseText;
			document.getElementById("searchResult").innerHTML=x;
					
		}
	}
	http.send(params);
}

searchByCategor y.php

<?php
	include 'config/opendb.php';
	
	$category = $_POST['category'];
	$nput=$_POST['nput'];
	
	if($category == 'name')
	{
		$searchQuery = "SELECT ServiceID, ClientLastName, ClientFirstName 
					FROM service a, client b
					WHERE a.ClientID = b.ClientID 
					AND CONCAT(ClientLastName,',', ClientFirstName) LIKE '$nput%'";
	}
	
	elseif($category == 'serviceID')
	{
		$searchQuery = "SELECT ServiceID, ClientLastName, ClientFirstName 
					FROM service a, client b
					WHERE a.ClientID = b.ClientID 
					AND ServiceID LIKE '$nput%'";
				
	}
	$res = mysql_query($searchQuery) or die("Error:searchCategory.php--->".mysql_error());
	$ctr=0;
	echo "<table cellspacing='1' style='width:100%;>
	<tr><font color='black'>
	<td bgcolor='#E7ECFD'  width='100' align='center'><strong>ServiceID</strong></td>
	<td bgcolor='#E7ECFD'  width='400' align='center'><strong>LastName</strong></td>
	<td bgcolor='#E7ECFD'  width='400' align='center'><strong>FirstName</strong></td>
	<td bgcolor='#E7ECFD' width='200' align='center'><strong>Service Proposal</strong></td>
	</font></tr>";
	while(list($serviceID, $clientLastName, $clientFirstName)=mysql_fetch_array($res))
	{
		if($ctr%2==0)
		{
			echo "<form action='serviceProposal.php' method=POST><tr><font color='black'>
					<td bgcolor='#CCCCCC'  width='100' align='center'>$serviceID<input type=hidden name=\"serviceID\" value=\"$serviceID\"></td>
					<td bgcolor='#CCCCCC'  width='400' align='center'>$clientLastName<input type=hidden name=\"clientLastName\" value=\"$clientLastName\"></td>
					<td bgcolor='#CCCCCC'  width='400' align='center'>$clientFirstName<input type=hidden name=\"clientFirstName\" value=\"$clientFirstName\"></td>
					<td bgcolor='#CCCCCC' width='200' align='center'><input type=submit name='serviceProposal' value='Create Service Proposal''></td>
					</font></tr></form>";	
					
		}
		else
		{
			echo "<form action='bookingOrder.php' method=POST><tr><font color='black'>
					<td bgcolor='#CEE7FF'  width='100' align='center'>$serviceID<input type=hidden name=\"serviceID\" value=\"$serviceID\"></td>
					<td bgcolor='#CEE7FF'  width='400' align='center'>$clientLastName<input type=hidden name=\"clientLastName\" value=\"$clientLastName\"></td>
					<td bgcolor='#CEE7FF'  width='400' align='center'>$clientFirstName<input type=hidden name=\"clientFirstName\" value=\"$clientFirstName\"></td>
					<td bgcolor='#CEE7FF' width='200' align='center'><input type=submit name='serviceProposal' value='Create Service Proposal' onClick='showserviceproposalform()'></td>
					</font></tr></form>";
		}
		$ctr++;
	}
	print "</table>";
	
	include 'config/closedb.php';
?>

my database is

CREATE TABLE `client` (
  `ClientID` int(11) NOT NULL AUTO_INCREMENT,
  `ClientFirstName` varchar(50) NOT NULL,
  `ClientLastName` varchar(50) NOT NULL,
  PRIMARY KEY (`ClientID`)
) 


CREATE TABLE `service` (
  `ServiceID` varchar(14) NOT NULL,
  `ClientID` int(11) DEFAULT NULL,
)

i dont know whats the problem but base on my observation the code didn't go to database..Pleas e help

any suggestions are very appreciated..th anks

[acoder]

Are there any error messages?

Try seeing what you're passing through and the response using Firebug.

[ghopz]

Hi acoder,

Thanks for response, Im using firebug and it returns ok,no error message, and i dont know what is my error,values are passing correctly but my problem is why my codes can't connect to my mysql query. if i run manually my query codes it runs properly so any idea?

Thanks,
ghop'z

[acoder]

OK, so what's the response from the server?

Have you tried a normal form with post, e.g.

<form action="searchByCategory.php" method="post">
<select name="category" id="category">
<option value="name">Name</option>
<option value="serviceID">ServiceID</option>
</select>
<input name="nput" type="text" id='search' size="40">
<input type="submit" value="Submit">
</form>

Does that produce the required output?

[ghopz]

OK, so what's the response from the server?

Have you tried a normal form with post, e.g.

<form action="searchByCategory.php" method="post">
<select name="category" id="category">
<option value="name">Name</option>
<option value="serviceID">ServiceID</option>
</select>
<input name="nput" type="text" id='search' size="40">
<input type="submit" value="Submit">
</form>

Does that produce the required output?

Hi acoder,

POST http://127.0.01/BOSS/searchByCategory.php 200 OK 24ms

this is the response from the server.

Yap, i try it and it run properly. i dont my error in my ajax..i cant run it properly in in firefox v3.6 but it works as i want it in ie and chrome.

thank,
ghop'z

[acoder]

OK, but what's the actual response, i.e. the output from the server script?

[ghopz]

OK, but what's the actual response, i.e. the output from the server script?

Hi acoder,

the output shows properly as i wanted it..


thanks,
ghop'z

[acoder]

That means that part's working and now we're left with the onreadystatecha nge call back function. On lines 34-5, add breakpoints and watch the variables concerned, i.e. x.

Try alerting the http.responseTe xt, try setting the "searchResu lt" div to "test", and so on.

[ghopz]

Hi acoder,

Im done on what you said. the values from alert box are correct and but it didn't display on the firefox browser but it is displayed on chrome and ie..


Thanks,
ghop'z

[acoder]

That's strange. Try something like this:

document.getElementById("searchResult").innerHTML="Test";

in place of setting it to x. If the responseText is set correctly, I can't imagine why it wouldn't be set correctly unless it's not getting the searchResult div for some reason.