two AJAX calls - only one working.

[mtm81]

I have a JS file which takes a number of variables and generates an AJAX output from a Url Path supplied as one of the variables.

In my main page - I call this script onload and also from user input.

The AJAX script is expecting the URL for the page that holds the AJAX content, the div ID of where to place that content and any QueryString values to be appended to the URL.



I've posted the full script plus the two calls I'm using below.. but the problem is this..

At the bottom of my main page I simply call one after the other as such:


//first lets get any ajax initial calls in
//blogs
getAJAXinfo('','includes/inc_projects_detail_blog.asp?ProjectID=<%=ProjectID%>&BlogID=','mainsection_innercontent_5');
//diary
getAJAXinfo('','includes/inc_projects_detail_diary.asp?today=','mainsection_innercontent_6')


if I remove either one of the calls. the other functions withouth problems.. however if I have both together.. the first call doesn't respond..

my script allows a "loading" png file to appear whilst the content is being fetched and that is all I get on the first call - as if the script has not got the content, or has got stuck somewhere.

I've checked in FF and have no errors displayed.

Anyone got any ideas why the page is getting stuck?





AJAX Script:

var xmlHttp;



function getAJAXinfo(InfoPassed,rootpath,divname)
{


var url=rootpath + InfoPassed
//alert (url)

//xmlHttp=GetXmlHttpObject(stateChanged(str))
xmlHttp=GetXmlHttpObject(function(){stateChanged(divname)})
xmlHttp.open("GET", url , true)
xmlHttp.send(null)

}

function stateChanged(divname)
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
//alert(str + "-" + SeeMoreCount)
document.getElementById(divname).innerHTML=xmlHttp.responseText


}
else
//show an ajax loader instead
{
document.getElementById(divname).innerHTML = "<img src='images/ajax-loader.gif' alt='Please Wait ...' width='61' height='61' class='ajaxloaderpad'/>"
}
}

function GetXmlHttpObject(handler)
{
var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("Opera not supported...")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}

[mtm81]

UPDATE - this appears to be intermittent.. in some cases It is working.. and in others.. the content for one of the calls is being loaded into both the divs...

[Kor]

Maybe this could be of some help:
http://javascript.about.com/library/blajax13.htm

[mtm81]

thanks for that.. although I now see where the problem lies (you can't make multiple requests with the same XMLHttpRequest object..)

I'm struggling to re-work my code so it can.

anyone offer assistance?

[A1ien51]

You are using a global variable to hold the request. So when you make the second call it overrides the first.

Eric

[mtm81]

thanks for that - I've moved the functions inside the main function and it's working well now..!!