Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple calls to same AJAX function: second one fails. 2

Status
Not open for further replies.

dfwalton

Programmer
Jul 24, 2002
143
Code is below. When I have an alert at the top of the getList function, this works beautifully. When I take it out, I only get the employees. I surmise that the alert somehow interrupts the flow, giving both datasets the chace to arrive. Is there some way around using an alertto gain the same functionality?




Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function initialize(){
		document.topLevelChoices.Region.selectedIndex = 0;
		checkAll(document.topLevelChoices.controls);
		toggleLevel("regionControl");
		
		getList('clientControl','clientList', 'AjaxGetClient.cfm?id=ALL', 1);
		getList('empControl','empList', 'AjaxGetEmp.cfm?id=ALL', 1);
		}
		
function checkAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = true ;
}

function toggleLevel(_levelId){
	var thisItem = document.getElementById(_levelId);
	
	thisItem.style.display = (thisItem.style.display == 'none') ? 'block' : 'none';
}
//alert('outerDiv is '+_outerDiv + '  ' + _innerDiv + '  ' + _cfm + '  ' + _init);
function getList(_outerDiv, _innerDiv, _cfm,  _init)
{		
	var outerDiv= document.getElementById(_outerDiv)
	var innerDiv= document.getElementById(_innerDiv)
	
	var curState = outerDiv.style.display
	
	if (_init == 1 || curState == 'none'){ 
			outerDiv.style.display='none';			
			}
	else{
			outerDiv.style.display='block';	
			}
	
	try{

		XMLHttpRequestObject =  new ActiveXObject("MSXML2.XMLHTTP");
		}catch(exception1){
			try{
			XMLHttpRequestObject =  new ActiveXObject("Microsoft.XMLHTTP");
			}catch(exception2){
			XMLHttpRequestObject=false;}
			}	
	if(!XMLHttpRequestObject&&window.XMLHttpRequest){
		XMLHttpRequestObject= new XMLHttpRequest();
		}
		if(XMLHttpRequestObject)
		{
		XMLHttpRequestObject.open("Get", _cfm)
		XMLHttpRequestObject.onreadystatechange= function()
		{
			if(XMLHttpRequestObject.readyState ==4 &&
			XMLHttpRequestObject.status == 200)
			{
			innerDiv.innerHTML= XMLHttpRequestObject.responseText;
			if(_init == 1){
					outerDiv.style.display='none';	
				       }
			}		
		}
		innerDiv.innerHTML="";
		XMLHttpRequestObject.send(null);}	
		}

</script>
</head>

<body onload="initialize();">


<h1>Step 1.  What EPD records do you want to download</h1>
<form name="topLevelChoices">
<fieldset title="Single Event"><legend>Single Event</legend>
Only records for a specific event:  <input type="text" name="eventNum" />
</fieldset>
<br /><br />
OR
<br /><br />
<input type="checkbox"  checked="checked" name="controls" onclick="toggleLevel('regionControl')"/>All Regions
<input type="checkbox" checked="checked" name="controls" onClick="toggleLevel('clientControl')" id="Client" />All Clients
<input type="checkbox" checked="checked" name="controls" onClick="toggleLevel('empControl')" id="Emp"/>All Employees

<div id="regionControl"><br /><br />
Region:   <select name="Region" onChange="getList('clientControl','clientList', 'AjaxGetClient.cfm?id='+this.value, 0);
		getList('empControl','empList', 'AjaxGetEmp.cfm?id=' +this.value, 0);">
		
		<option value="ALL" selected>Any</option>
		<option value="Bay">BAY</option>
		<option value="SD">SD</option>
	</select>
	
</div>

<div id="clientControl">
	<br /><br /><span class="smallLink">Select one or more Clients</span><br>
	<div id="clientList"></div>
</div>

<div id="empControl">
	<br /><br /><span class="smallLink">Select one or more Employees</span><br>
	<div id="empList"></div>
</div>
</form>
</body>
</html>
 
perhaps you could use a 'settimeout' for the second call

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
What you may want to do also is make your XMLHttpRequestObject variable local to the getList function; Javascript may be seeing the XMLHttpRequestObject variable as a global, and hence, when you call both getList functions in the head of the document, the request for the clients gets aborted by the request for the employees.

The other thing you could do is check to see if XMLHttpRequestObject is processing a request at the current moment; if so, set a timeout (or something of the like) to pause execution of the 2nd script until the first request completes ( see (the 2nd example) for a sample ).

Greg
 
nice one grtammi!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top