Ajax Code

One works, the other doesn't. Both identical.

[timmah100]

I'm just learning AJAX.

This code works, but it shows the information on both div tags on my page, even though they are named different.

Can anybody tell me what the problem is?

var xmlHttp
function hvacUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getuser.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("hvacHint").innerHTML=xmlHttp.responseText 
 } 
}
function plumbingUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getplumbing.php"
url=url+"?p="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChange() 
{ 
if (xmlHttp.readyState==4 ¦¦ xmlHttp.readyState=="complete")
 { 
 document.getElementById("plumbingHint").innerHTML=xmlHttp.responseText 
 } 
}

Thanks in advance

[Fotiman]

How are they being called?

[timmah100]

From a select menu
plumbing code

<select name="plumbing" id="plumbing" onClick="plumbingUser(this.value)">

hvac code

<select name="hvac" id="hvac" onClick="hvacUser(this.value)">

[Fotiman]

So far, I don't see anything unusual. Can you post a working example that demonstrates the behavior you describe?

[timmah100]

can i post the link?

[Fotiman]

No links, but you can post the HTML (removing any references and URLs to your specific site... using example.com instead).

[timmah100]

ok, I get it

Here is the form

<form name="editform" action="#" method="POST">
<select name="plumbing" id="plumbing" onClick="plumbingUser(this.value)">
   <option></option>
   <?php
$sql="SELECT * FROM contractors WHERE type = 'Plumbing' ORDER BY name ASC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
 {
 ?>
 <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option><br />
 <?php
 }
?>
</select>
</td>
  </tr>
  </table></td>
 </tr>
 <tr>
 <td>HVAC Contractor</td>
 <td><table width="600" cellpadding="5" cellspacing="0">
  <tr>
   <td width="200">
   <div id="hvacHint"><b><?php echo $row9['hvac_contractor']; ?></b></div></td>
   <td width="200">
   <select name="hvac" id="hvac" onClick="hvacUser(this.value)">
   <option>--</option>
   <option value="an">Add New</option>
   <option>--</option>
   <?php
$sql="SELECT * FROM contractors WHERE type = 'HVAC' ORDER BY name ASC";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
 { ?>
 <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option><br />
 <?php
 }
?>
</select>
</form>

In the header, here is ajax.js

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
 {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 }
return xmlHttp;
}

Then the selectuser.js

var xmlHttp
function hvacUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getuser.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("hvacHint").innerHTML=xmlHttp.responseText 
 } 
}
function plumbingUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getplumbing.php"
url=url+"?p="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChange() 
{ 
if (xmlHttp.readyState==4 ¦¦ xmlHttp.readyState=="complete")
 { 
 document.getElementById("plumbingHint").innerHTML=xmlHttp.responseText 
 } 
}

[Fotiman]

Both your hvacUser and your plumbingUser methods set a callback of "stateChanged" on the xmlHttp object. It looks like you had created another method "stateChange" (note, not "d" at the end) for the plumbingUser callback, but you incorrectly assigned stateChanged.

[Fotiman]

However, looking closer, I see that both of those methods are referencing a global xmlHttp object, which is NOT the same xmlHttp method that was used in the AJAX methods. So I still wouldn't expect this to work correctly.

[timmah100]

How would I fix this?

I am not very familiar with AJAX, this code is bits and pieces from many tutorials

[Fotiman]

I'm not sure if this will work or not, but you might be able to do something like this:

xmlHttp.onreadystatechange=function(req){ 
  return function() { 
    if (req.readyState==4 ¦¦ req.readyState=="complete") { 
      document.getElementById("hvacHint").innerHTML=req.responseText 
    } 
  } 
}(xmlHttp); 

In other words, you assign an anonymous function as your callback, and that function can access the xmlHttp object (as parameter "req").

[Fotiman]

Be sure to replace the ¦¦ with real logical OR operator.