Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with Ajax calls.

    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,

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •