help with Ajax calls.

mbenson · 04-10-2009, 07:04 PM

I hope this is the right spot for this..

I have 2 Select boxes on a page, and each one is calling to a separate function to get data from a MySQL table. Individually they work fine. When I have both working, the following result happens..

They both use the same select box for the output, and onblur, the value of the selected item from the select box is sent to the same text box.

Something else of note here, is that if I re-order the functions, say put the second above the first, the select box used changes.

This is the code for the two function:

Code:

function showHint1(str) {
	
  if (str.length==0) {
	document.getElementById('catHint').style.visibility = 'hidden';
	document.getElementById("catHint").innerHTML="";
	return;
  }
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null){
	alert ("Your browser does not support AJAX!");
	return;
  } 
  var url="async/gethint.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) {
	document.getElementById('catHint').style.visibility = 'visible';
	document.getElementById("catHint").innerHTML=xmlHttp.responseText;
  }
}

// SEPERATOR FOR THE showHint FUNCTIONS
//
//
//

function showHint2(str2) {
	
  if (str2.length==0) {
	document.getElementById('streetHint').style.visibility = 'hidden';
	document.getElementById("streetHint").innerHTML="";
	return;
  }
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null){
	alert ("Your browser does not support AJAX!");
	return;
  } 
  var url="async/gethint_street.php";
  url=url+"?q="+str2;
  url=url+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
} 

function stateChanged() { 
  if (xmlHttp.readyState==4) {
	document.getElementById('streetHint').style.visibility = 'visible';
	document.getElementById("streetHint").innerHTML=xmlHttp.responseText;
  }
}

This is the Two text feilds

Code:

<input type="text" name="StreetName" id="StreetName" onkeyup="showHint2(this.value)" value="<?php echo htmlentities($streetname); ?>" />

<input type="text" name="Category" id="Category" onkeyup="showHint1(this.value)"  value="<?php echo htmlentities($categorytext); ?>">

This is the code for the select boxes

Code:

Category Suggestions:<br />
        <select size="10" name="catHint" id="catHint" style="visibility:hidden" onblur="addThisCategory()"></select>

Street Suggestions:<br />
        <select size="10" name="StreetName2" id="streetHint" style="visibility:hidden" onblur="addThisStreetName()"></select>

This is where the value is added to the text field catHint.

Code:

			  function addThisCategory() {
				  // get the selected option to set into the HiddenCatID feild.
				  var option=document.getElementById("catHint").value;
				  //set the ID# from the <option value="$a2..."> into the hidden field 
				  document.getElementById("HiddenCatID").value = option;
				  // get the text between the <option></option> tag. innerHTML maybe and parse.
				  
				  //set the selected options text value in the  Category Text Field.
				  var myselect=document.getElementById("catHint")
				  for (var i=0; i<myselect.options.length; i++){
				   if (myselect.options[i].selected==true){
					document.getElementById("Category").value =document.getElementById("catHint").options[i].text;
					break
				   }
				  }
			  }

This is where the value is added to the text field streetHint.

Code:

			  function addThisStreetName() {
				  // get the selected option
				  // var option2=document.getElementById("streetHint").value;
				  //set the ID# from the <option value="$a2..."> into the hidden field 
				  // document.getElementById("HiddenCatID").value = option;
				  // get the text between the <option></option> tag. innerHTML maybe and parse.
				  
				  //set the selected options value in the  StreetName Text Field.
				  var myselect2=document.getElementById("streetHint")
				  for (var i=0; i<myselect2.options.length; i++){
				   if (myselect2.options[i].selected==true){
					document.getElementById("StreetName").value =document.getElementById("streetHint").options[i].value;
					break
				   }
				  }
			  }

I know there is going to something silly that I am just not seeing, but any help or suggestion is always welcomed.

Thanks,

A1ien51 · 04-12-2009, 02:29 PM

You are using a global variable to hold your XMLHttpRequest. So calling one will override the other. You really should look into using a library to make XMLHttpRequest calls.

Eric