Ajax object conflicting?

[rpollard]

Hi,

I am relatively new to Ajax and am wondering if someone can shed a bit of light on the conceptual part of how Ajax handles its communication.

Not knowing a whole lot about Ajax when I started coding I copied some code from the Internet that seem to be the accepted way of creating the object and using it.
This is the code I am using on the Javascript side:
------------------------------------------------------------------------

var xmlHttp
var vTrgtListObj
 
 
function get_test_diagnosis(vCodeList,pTrgtListObj)
{ 
vTrgtListObj = pTrgtListObj
 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="test_diagnosis_lookup.php?code_list=" + vCodeList;
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(null)
}
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
   // Delete all elements in target list
   var vCurrElmnt = 0
   // document.getElementById("txtHint").innerHTML=xmlHttp
 
   if(xmlHttp.responseText.length > 0) {
     vDiagSrcListObj = document.getElementById('diag_list_available');
     vDiagSrcListObj.length = 0;
     var aResponseData;
 
     aListData = xmlHttp.responseText.split("\n")
     vMaxCount = aListData.length;
     for(vCurrElement = 0; vCurrElement < vMaxCount - 1; vCurrElement++) {
 
         aResponseData = aListData[vCurrElement].split("    ")
         vFields = new Option(aResponseData[1], "",false,false);
         var j = vDiagSrcListObj.length;
         vDiagSrcListObj.options[j] = vFields;
         vDiagSrcListObj.options[j].value = aResponseData[0];
 
 
     }
   }
 
 
 }
}
 
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;
}
 

------------------------------------------------------------------------

This code is stored in a file and included in the HTML page. I have another file that has roughly this same code in it but does something entirely different than this one. The other one was the original Ajax code that I wrote to do a auto-lookups of reference data from an HTML form.

When I included the above file in the HTML page the original code stopped working. It doesn't execute the callback segment of the code. If I comment out the new Javascript code the original lookups start working again.

I have tried using a different variable to store the XMLHttpRequest object in. When I do the code in this file, although none of it is executed, will produce errors stating the new object variable has no properties. I understand if I'm executing both of these files at the same time and am using the same variable to store the XMLHttpRequest object it would produce a conflict. But how does the second Javascript code produce errors when the first Javascript code is running?

I need to implement Ajax functionality for 2 different purposes but in the same HTML page. How do I do this without causing a conflict?

If you have the time, I would appreciate a short description of how the XMLHttpRequest object communicates so I can understand how the objects should be implemented.

Thanks for your time,

Robert Pollard

[rpollard]

Sorry for being too quick to post but I figured out the problem. I was using the same callback function name in both files. I guess it was calling both callbacks in each file when the callback occurred.

Regards,

Robert

[pbmods]

Heya, Robert. Welcome to TSDN!

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)