Multiple Ajax calls on one page

**Morisatwork** · 02-24-2008, 09:55 PM

Hi Guys

Hope this is the right area to ask this.

I am slowly coming to grips with javascrip and ajax, doing most of my coding in ASP.

My problem is that I have the following AJAX script which I am using on a page. However there are times where I need to make a couple or more different calls on the one page and as I believe this cannot be done with the code below. The result seems to be that the resulting information is displayed in the last div irrespective which is accessed

Can someone assist me in either modifying the script below or helping with/directing to other script to do what I want.

Code:

// JavaScript Document
var xmlHttp

function getfilter(str,str1)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="getfind.asp"
url=url+"?q="+str+"&q1="+str1
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("txthint").innerHTML=xmlHttp.responseText 
} 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Hope what the above is clear

Thanking you

Moris

**jscheuer1** · 02-25-2008, 10:30 AM

This line:

Code:

document.getElementById("txthint").innerHTML=xmlHttp.responseText

pretty much ensures that only one element, the one with txthint as its id will display the imported content. You could do something like so:

Code:

function getfilter(str,str1,el)
{ 
getfilter.el=el;
xmlHttp=GetXmlHttpObject() . . .

and later:

Code:

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById(getfilter.el).innerHTML=xmlHttp.responseText 
} 
}

Then when you call getfilter(), pass the id of the target element along with the query string data, examples:

Code:

getfilter('bob', 'albert', 'txthint')

Code:

getfilter('alice', '', 'txthint2')

**maefius** · 04-12-2008, 07:10 PM

I am also trying to load multiple ajax areas on one ASP page. My code for some reason only loads the second area, and seems to skip the first. Below is my code. Thanks if you can explain this issue!

Code:

<script language="javascript">
	//-------------------------- AJAX Code ---------------------------------
var xmlHttp
function loadAjax(myurl,str,mydiv) { 
	loadAjax.mydiv=mydiv;
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null) {
		alert ("Your browser does not support AJAX!");
		return;
	} 
	var url=myurl;
	url=url+"?ndate="+str;
	url=url+"&sid="+Math.random();
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

function stateChanged() { 
	if (xmlHttp.readyState==4) { 
		//alert("readystate=4: "+loadAjax.mydiv);
		document.getElementById(loadAjax.mydiv).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>
<script>
loadAjax("register.asp", "", "ajax1");
loadAjax("reminder.asp", "", "ajax2");
</script>
</head>

<body>
Test of two ajax sections on one page:
<p></p>
first one:
<div id="ajax1"></div>
<p></p>
second one:
<div id="ajax2"></div>
</body>

**Master_script_maker** · 04-12-2008, 09:20 PM

Code:

function stateChanged() { 
	if (xmlHttp.readyState==4) { 
		//alert("readystate=4: "+loadAjax.mydiv);
		document.getElementById(loadAjax.mydiv).innerHTML=xmlHttp.responseText;
	}
}
....
loadAjax("register.asp", "", "ajax1");
loadAjax("reminder.asp", "", "ajax2");

here you are calling the function twice in a row. setting loadAjax.mydiv twice before it responds once, so when the first responds, it goes to ajax2, then the second overrides it.

**Master_script_maker** · 04-12-2008, 09:28 PM

this should work:

Code:

<script language="javascript">
	//-------------------------- AJAX Code ---------------------------------
var xmlHttp
function Ajax_init() {
this.loadAjax = function(myurl,str,mydiv) { 
	this.mydiv=mydiv;
	this.xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null) {
		alert ("Your browser does not support AJAX!");
		return;
	} 
	var url=myurl;
	url=url+"?ndate="+str;
	url=url+"&sid="+Math.random();
	this.xmlHttp.onreadystatechange=this.stateChanged;
	this.xmlHttp.open("GET",url,true);
	this.xmlHttp.send(null);
	this.stateChanged = function() {
		if (this.xmlHttp.readyState==4) { 
			//alert("readystate=4: "+this.mydiv);
			document.getElementById(this.mydiv).innerHTML=this.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>
<script>
var ajax1 = new Ajax_init();
var ajax2 = new Ajax_init();
ajax1.loadAjax("register.asp", "", "ajax1");
ajax2.loadAjax("reminder.asp", "", "ajax2");
</script>
</head>

<body>
Test of two ajax sections on one page:
<p></p>
first one:
<div id="ajax1"></div>
<p></p>
second one:
<div id="ajax2"></div>
</body>

**maefius** · 04-12-2008, 09:47 PM

Thanks so much for helping with this! But still not quite working. At first I got the alert error "Your browser does not support AJAX" but got that error to stop when I changed "xmlHttp" to "this.xmlHttp" in this section (looks like maybe you just missed changing that one?):

if (xmlHttp==null) {
alert ("Your browser does not support AJAX!");
return;
}

Now I don't get any errors, but nothing loads in the ajax div tags. Any ideas?

Thanks!

**Master_script_maker** · 04-13-2008, 12:59 PM

try this:

Code:

<script language="javascript">
	//-------------------------- AJAX Code ---------------------------------
var xmlHttp
function Ajax_init() {
this.loadAjax = function(myurl,str,mydiv) { 
	this.mydiv=mydiv;
	this.xmlHttp=GetXmlHttpObject();
	if (this.xmlHttp==null) {
		alert ("Your browser does not support AJAX!");
		return;
	} 
	this.url=myurl;
	this.url+="?ndate="+str;
	this.url+="&sid="+Math.random();
	this.xmlHttp.onreadystatechange=this.stateChanged;
	this.xmlHttp.open("GET",this.url,true);
	this.xmlHttp.send(null);
	this.stateChanged = function() {
		if (this.xmlHttp.readyState==4) { 
			//alert("readystate=4: "+this.mydiv);
			document.getElementById(this.mydiv).innerHTML=this.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>
<script>
var ajax1 = new Ajax_init();
var ajax2 = new Ajax_init();
ajax1.loadAjax("register.asp", "", "ajax1");
ajax2.loadAjax("reminder.asp", "", "ajax2");
</script>
</head>

<body>
Test of two ajax sections on one page:
<p></p>
first one:
<div id="ajax1"></div>
<p></p>
second one:
<div id="ajax2"></div>
</body>

**maefius** · 04-13-2008, 04:01 PM

Unfortunately, still nothing loads in the div tags. This seems harder than one would have thought... In IE I sometimes see the JS error "Not implemented" although firefox shows no errors, and in IE that error only happens when I reload the page by pressing enter in the location bar (not when I reload by doing ctrl-r).

Any further ideas? Thanks.