AJAX Problem

[mark110384]

Hey fellas I'm having an issue with AJAX in IE, I suspect that it is something wrong with the PHP. At the moment it works fine in FF, the user begins to enter a product name or ID and a table is automatically populated however I wan't these items to be selected by the user as a link that will then take them to there chosen product. In IE however it only brings back the item name at first and it is not a link. It isn't until later when the user has typed a more accurate match that the item is fully displayed, with Item ID and Name and the link. I hope that makes sense, any suggestion why it is doing this? Here's the PHP coding used. Thanks.

 

<?

require('../functions.php');

$connect = @ConnectToDb($dbhost, $dbuser, $dbname);

$search = $_GET['search'];

$sql = "SELECT * FROM item_details WHERE item_short_name LIKE '%$search%' OR item_no LIKE '%$search%' ORDER BY sts_id";




	$result = mysql_query($sql);


while($suggest = mysql_fetch_array($result)) 
	{

		$itemno = $suggest['item_no'];

		$itemname = $suggest['item_short_name'];

		$itemurl = $suggest['item_url'];




	;

echo "<a href = $itemurl>$itemno - $itemname</a>\n";


	}
?>

 

[RichardRotterdam]

if you think it is php related try calling your php file directly in your browser and see what that gives you. I highly doubt its the php that goes wrong since php has nothing to do with the browser.

 

[mark110384]

Yeah I'm starting to think that it JS related now

[aschk]

Without a doubt it's going to be your JS, both FF and IE have different javascript engines and as a result deal with the DOM in different ways. My recommendation would be to use a library that is compatible in most browsers, such as JQuery or Mootools.

 

Unfortunately we can't offer any further debugging unless we see some JS code

[mark110384]

Here is the coding for the JS, theres not much to it

 

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
	return new XMLHttpRequest();
} else if(window.ActiveXObject) {
	return new ActiveXObject("Microsoft.XMLHTTP");
} else {
	alert("Your browser does not support this function!");
}
}

//XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
	var str = escape(document.getElementById('txtSearch').value);
	searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
	searchReq.onreadystatechange = handleSearchSuggest; 
	searchReq.send(null);
}

}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
	var ss = document.getElementById('search_suggest')
	ss.innerHTML = '';
	var str = searchReq.responseText.split("\n");
	for(i=0; i < str.length - 1; i++) {

		var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
		suggest += 'onmouseout="javascript:suggestOut(this);" ';
		<!--suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';-->
		suggest += 'class="suggest_link">' + str[i] + '</div>';
		ss.innerHTML += suggest;
	}
}

}

//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('txtSearch').value = value;
document.getElementById('search_suggest').innerHTML = '';
}

[mark110384]

I think a part of the problem could be from the SQL statement. For example the world Francis, if I type in F and then r no results are shown and then if start again and type c, i and the s the word Francis is displayed, does anyone know a soloution to this problem?

[mark110384]

But hwo can it work in FireFox so amazingly well and not work in IE 

[nadeemshafi9]

on the ajaxian http request to the php code try adding a random number to force IE to download the data otherwise it thinks it has done it already and dosent need to do it again so every time you press a button it needs to call ur script in FF it works fine but in IE it will not redownload the data on each key press unless you press alt and refresh so ajax fails here.

 

il give u soem code, basicaly need to append the date to teh url that is called so IE identifies it as a new URL therfore will download the data from teh result of the php script

 

IE is designed to be secure rather than developer freindly u will find many features are either blocked or non existent or implamented differently.

 

i would rather develop on FF and do my shopping on IE

 

TRY THIS

 

<script>
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
       var date = new Date();
var timestamp = date.getTime();
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
	var str = escape(document.getElementById('txtSearch').value);
	searchReq.open("GET", 'searchSuggest.php?search=' + str + '&time=' + timestamp , true);
	searchReq.onreadystatechange = handleSearchSuggest; 
	searchReq.send(null);
}

}
</script>

[mark110384]

For some inexplicable reason it seems to work fine in IE now? Hmmm I haven't even done anything to it! Strange. Thanks for the suggestion anyway though I'm gunna keep an eye on it.