PDA

View Full Version : 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.




// 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:



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:


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

and later:


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:


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


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!



<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
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:

<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:

<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.

BYK
04-13-2008, 04:06 PM
Try this script:
http://amplio-vita.net/JSLib/js/aV.main.ajax.js
Documentation is inline but a separate one can be found here:
http://amplio-vita.net/JSLib/documentation

maefius
04-24-2008, 07:02 PM
Any samples of how to use this library? Such as, how exactly do you call the functions to load a page in a div?

BYK
04-24-2008, 07:27 PM
Alright, you could figure it out from the documentation but I accept, it is not as useful as a demo page.

I have a demo, which is not very neat, at http://goeker.amplio-vita.net/heart
But the simplest way to load a page into a div is


AJAX.loadContent('mypage.php', 'mydivsID');

That's all :) If you want more info look at http://amplio-vita.net/JSLib/documentation/00_file.html#AJAX.loadContent or just ask here ;)

dmgatwork
02-04-2016, 07:53 PM
These links are no longer active, is this information available anywhere? I am trying to find an example of loading more than one ajax returns on the same page. Thanks

jscheuer1
04-28-2016, 03:23 AM
This is a sort of old thread. Multiple AJAX calls are no problem. Just be aware that AJAX means Asynchronous. Therefore there's no way to be sure which call will come through first. So - of course one call cannot rely upon data from another call unless it is chained not to occur until after that previous call has returned. Additionally, as this is somewhat just adding on when a new thread would be more logical - if you want more help, please start a new thread on this topic.