[SOLVED] Javascript used multiple times on same page

[alconebay]

I am using this script from w3schools to get information from a database and display it. It's ajax but my question is about javascript. I am using this script multiple times on the same page to pull information in different dividers. But, the scripts are interfering with each other and the information keeps getting put in the wrong divider. I thought that if I changed the function name that would do the trick, but no. Here is what I have:

 

<select name="id1" id="inquery1" onclick="inquiry1info(this.value)">
...drop down information goes here...

<div id="inquery1info">This is where the information for inquiry 1 should go</div>

<script language="javascript" type="text/javascript">
var xmlHttp

function inquiry1info(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="(path goes here)/inqueryqueryandtable.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("inquery1info").innerHTML=xmlHttp.responseText 
} 
}

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;
}
</script>

<select name="id2" id="inquery2" onclick="inquiry2info(this.value)">
...drop down information goes here...

<div id="inquery2info">This is where the information for inquiry 2 should go</div>

<script language="javascript" type="text/javascript">
var xmlHttp

function inquiry2info(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="(path goes here)/inqueryqueryandtable.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("inquery2info").innerHTML=xmlHttp.responseText 
} 
}

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;
}
</script>

 

If I select a user in the first drop down the information will always show up in the second "inquery2info" divider. It's like it's always using the second script instead of the first one for the first inquery. What do I need to change to keep these scripts for interferring with each other? Or is there a way to add some variables to the script and just have it in the page once?

[rhodesa]

the problem is that they are all trying to share the variable xmlHttp. change the variable name for each or just use a JavaScript library like jQuery to handle all your AJAX problems

 

http://docs.jquery.com/Ajax

[alconebay]

Is there another variable being shared besides that one?

 

I changed the xmlHttp variables in the first script to xmlHttpOne and in the second script I changed them to xmlHttpTwo.

 

Now the first inquiry/script no longer displayed the information the second  inquiry/script divider, it just doesn't display anything at all. But the second inquiry/script works great.

 

But If I delete the second inquiry/script, then the first one works fine.

[alconebay]

Got it. I had to change the function names also. Changed "stateChanged" and "GetXmlHttpObject" to have a "1" after them in the first script and a "2" after them in the second script and that did the trick.

 

Thanks for your help rhodesa.

 

I'll look into using jQuery next time.

[rhodesa]

here is an example of what i mean:

<?php
  if($_GET['q']){
    sleep(5);//Make it wait 5 seconds
    print $_GET['q'];
    exit;
  }
?>
<script language="javascript" type="text/javascript">
var xmlHttp1
var xmlHttp2

function inquiry1info(str)
{
  xmlHttp1=GetXmlHttpObject()
  if (xmlHttp1==null)
  {
    alert ("Browser does not support HTTP Request")
    return
  }
  var url="test.php"
  url=url+"?q="+str
  url=url+"&sid="+Math.random()
  xmlHttp1.onreadystatechange=stateChanged1
  xmlHttp1.open("GET",url,true)
  xmlHttp1.send(null)
}

function stateChanged1()
{
  if (xmlHttp1.readyState==4 || xmlHttp1.readyState=="complete")
  {
    document.getElementById("inquery1info").innerHTML=xmlHttp1.responseText
  }
}

function inquiry2info(str)
{
  xmlHttp2=GetXmlHttpObject()
  if (xmlHttp2==null)
  {
    alert ("Browser does not support HTTP Request")
    return
  }
  var url="test.php"
  url=url+"?q="+str
  url=url+"&sid="+Math.random()
  xmlHttp2.onreadystatechange=stateChanged2
  xmlHttp2.open("GET",url,true)
  xmlHttp2.send(null)
}

function stateChanged2()
{
  if (xmlHttp2.readyState==4 || xmlHttp2.readyState=="complete")
  {
    document.getElementById("inquery2info").innerHTML=xmlHttp2.responseText
  }
}

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;
}
</script>

<select name="id1" id="inquery1" onclick="inquiry1info(this.value)">
  <option value="test1">Test</option>
</select>
<div id="inquery1info">This is where the information for inquiry 1 should go</div>


<select name="id2" id="inquery2" onclick="inquiry2info(this.value)">
  <option value="test2">Test</option>
</select>
<div id="inquery2info">This is where the information for inquiry 2 should go</div>

 

the above can be shortened to this if you use jQuery:

<?php
  if($_GET['q']){
    sleep(5);//Make it wait 5 seconds
    print $_GET['q'];
    exit;
  }
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
</script>

<select name="id1" id="inquery1" onclick="$('#inquery1info').load('test.php?q=' + this.value)">
  <option value="test1">Test</option>
</select>
<div id="inquery1info">This is where the information for inquiry 1 should go</div>


<select name="id2" id="inquery2" onclick="$('#inquery2info').load('test.php?q=' + this.value)">
  <option value="test2">Test</option>
</select>
<div id="inquery2info">This is where the information for inquiry 2 should go</div>

[alconebay]

Nice. I am using your jQuery code and it's working great.

 

Why do you need to have it wait 5 second?

[rhodesa]

Why do you need to have it wait 5 second?

you don't...sorry...i just did that so i would have to click both for testing. otherwise the first one might finish before i had time to click the second one