Ajax

[Guest zeux]

HiI'm doing a webpage and I want to introduce a livesearch system (search the database at the same time you are writing in the textfield). Like that: www.gr0w.com/amos/livesearchI have see the ajax example in w3school tutorials and i have tried to put it working in my webpage, but with no sucessI want that in the main page appear a textfield, and when the user keypress in the textfield appear the result that is done by another page with php (I think that is the best way)So i have do that:Main page : textfield:

onKeyUp="showHint(form1.pesquisa)"

<script>function showHint(str){ if (str.length > 0){ var url="teste.php"xmlHttp=GetXmlHttpObject(stateChanged) xmlHttp.open("GET", url , true) xmlHttp.send(null) } else{ document.getElementById("txtHint").innerHTML="" }}function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } </script></head>

Im in tests so I have a that mainpage and I want that the resultapage appear on the local of text "APARECE"In this teste i have only put the text "TESTE" in the resultpageWhen I type anything in textfield the text "APERECE" desappear but dont appear the resultpageWhat I'm doing wrong ?Thanks por replies and sorry for my bad english

[reportingsjr]

Its ok for the bad english.. not everyone has to learn it...Anyways, you have a big problem. You need to first make the xmlhttp request.. Put this somewhere:

//make request and such is all below until next commentr = 0; request = new Array();reqChanges = new Array();response = new Array();function Ajax(a, url, mode, data) {	var requester = null;	reqChanges[a] = 0;	try { requester = new XMLHttpRequest(); }	catch (error) {  try { requester = new ActiveXObject("Microsoft.XMLHTTP"); }  catch (error) { 	 try { requester = new ActiveXObject("Msxml2.XMLHTTP"); } 	 catch (error) {    alert("Failed to Initiate Request");    return false; 	 }  }	}	requester.open(mode, url);	if (mode == "POST") {  requester.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  requester.setRequestHeader("Content-length", data.length);  requester.setRequestHeader("Connection", "close");	}	requester.send(data);	return requester;}function AjaxHandle(requester, a) {	reqChanges[a]++;	// If XMLHR object has finished retrieving the data	if (requester.readyState == 4)	{  try { 	 if (requester.status == 200) {     response[a] = requester.responseText;    return true; 	 } else if (requester.status != 0) { alert("Error retrieveing URL: "+requester.status); return false; }  }  catch (error) { alert(error); return false; }  return false;	} else { return false; }}//end of ajax requests

The code above is for actually making a request to the http server, to see if it can and then the second function handles the request, it actually sends and receives informatoin.. basically.Im not sure how to do what you would want but heres one example script of using my code:

//pulls the chat out and puts it on the pagefunction fetchChat(){chatter = document.getElementById("chatbox");	request[r] = Ajax(r, "test4.php", "POST", "");	request[r].onreadystatechange = getIt;	function getIt(){  if (request[r].readyState == 4 && request[r].status == 200 ) {  if (reqChanges[r] < 5) { 	 if (AjaxHandle(request[r], r)) {    if (response[r] != null) {    chatter.innerHTML = response[r];    }    else {    	 alert(response[r]); chatter.innerHTML = "Error"; return false;     } 	 }  }  else {  	 request[r] = null; alert("Connection for chat failed.");  	 chatter.innerHTML = "Error"; return false;   }  }	}}

All I did to learn AJAX was disect codes and learn from that. I reccomed you do the same. get a basic understanding of it from tutorials, then google AJAX scripts and source codes or something like that. Then just take the scripts and take them apart. :)Hope this helped you!

[zanfranceschi]

---edited---Oops, posted with reportingsjr. I guess his reply is more apropriated. Mine is just a simple copy of a working file.---/edited---I can't parse your code cause I don't know ajax, but I've just tried the w3schools example and it worked ok (the Source part (http://www.w3schools.com/ajax/ajax_source.asp)).

<html><head>	<script type="text/javascript">  var xmlHttp;  function showHint(str) { 	 if(str.length == 0) {    document.getElementById("txtHint").innerHTML= '';    return; 	 } 	  	 xmlHttp=GetXmlHttpObject(); 	  	 if(xmlHttp==null) {    alert("Browser does not support HTTP Request");    return; 	 }    var url="ajax.php"// 	 url=url+"?q="+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("txtHint").innerHTML=xmlHttp.responseText  	 }  }    function GetXmlHttpObject() { 	  	 var objXMLHttp=null 	  	 if(window.XMLHttpRequest) {    objXMLHttp=new XMLHttpRequest(); 	 } else if (window.ActiveXObject) {    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); 	 } 	  	 return objXMLHttp;  }		</script></head><body><form>First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></form><p>Suggestions: <span id="txtHint"></span></p> </body></html>

And this would be the ajax.php file

Anything! Just testing...